diff --git a/index.html b/index.html
index 1d0fbd4..f42db83 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,44 @@
x.style.display = "none";
}
}
+ function toggleDarkLight() {
+ var element = document.body;
+ element.classList.toggle("dark_mode_body");
+ // var element = document.a;
+ // element.classList.toggle("dark_mode");
+ var elements = document.getElementsByClassName("authorlink")
+ for (const element of elements)
+ element.classList.toggle("dark_mode_authorlink");
+ var elements = document.getElementsByClassName("paperlink")
+ for (const element of elements)
+ element.classList.toggle("dark_mode_paperlink");
+ var elements = document.getElementsByClassName("extlink")
+ for (const element of elements)
+ element.classList.toggle("dark_mode_extlink");
+ var elements = document.getElementsByClassName("jourlink")
+ for (const element of elements)
+ element.classList.toggle("dark_mode_jourlink");
+ var elements = document.getElementsByClassName("ball");
+ for (const element of elements)
+ element.classList.toggle("dark_mode_ball");
+ var elements = document.getElementsByClassName("style-zero");
+ for (const element of elements)
+ element.classList.toggle("dark_mode_style-zero");
+ var elements = document.getElementsByClassName("style-one");
+ for (const element of elements)
+ element.classList.toggle("dark_mode_style-one");
+ // var elements = document.getElementsByClassName("jourlink")
+ // for (const element of elements)
+ // element.classList.toggle("dark_mode_jourlink");
+ // element.classList.toggle("dark_mode_authorlink");
+ // var className = div.getAttribute("class");
+ // if(className=="authorlink") {
+ // div.className = "dark_mode_authorlink";
+ // }
+ // else{
+ // div.className = "authorlink";
+ // }
+ }
@@ -25,6 +63,7 @@
Teaching
Research
Service
+ Toggle Light/Dark
@@ -57,6 +96,8 @@
+
+
diff --git a/style.css b/style.css
index 5ffdb3e..84116b8 100755
--- a/style.css
+++ b/style.css
@@ -6,8 +6,10 @@ html {
body {
font-family: "Palatino", "Georgia", Times, serif;
- background-color: rgb(248,245,218);
+ background-color: #f9f5d7;
+ color: #282828;
line-height: 1.4;
+ font-weight: 500;
padding-bottom: 12.5em;
}
@@ -96,7 +98,7 @@ ul#course {
.navbar a {
/* float: left; */
display: inline-block;
- color: #f2f2f2;
+ color: #f9f5d7;
text-align: center;
padding: 0.625em 1em;
text-decoration: none;
@@ -104,8 +106,8 @@ ul#course {
/* Change background on mouse-over */
.navbar a:hover {
- background: #ddd;
- color: black;
+ background: #f9f5d7;
+ color: #3c3836;
}
/* Main content */
@@ -149,27 +151,27 @@ hr {
border: 0em solid;
border-radius: 1em;
padding: 0.6em;
- box-shadow: 0.3em 0.3em 1em #999999;
+ box-shadow: 0.3em 0.3em 1em #7c6f64;
}
hr.style-one {
border: 0;
height: 0.1em;
- background: #333;
- background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+ background: #282828;
+ background-image: -webkit-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -moz-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -ms-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -o-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
}
hr.style-zero {
border: 0;
height: 0em;
- background: #333;
- background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
- background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+ background: #282828;
+ background-image: -webkit-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -moz-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -ms-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
+ background-image: -o-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
}
hr.curve {
@@ -247,52 +249,46 @@ hr.curve {
height: 0.5em;
margin: 0.5em auto;
border-radius: 3em;
+ background: #282828;
}
.ball:nth-child(1) {
- background: #000000;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}
.ball:nth-child(2) {
- background: #000000;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}
.ball:nth-child(3) {
- background: #000000;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}
.ball:nth-child(4) {
- background: #000000;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}
.ball:nth-child(5) {
- background: #000000;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animation: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}
.ball:nth-child(6) {
- background: #000000;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}
.ball:nth-child(7) {
- background: #000000;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
@@ -380,4 +376,69 @@ hr.curve {
100% {
transform: translate(1em);
}
+}
+
+/* Dark Mode */
+
+.dark-mode a {
+ color: #83a598;
+}
+
+.dark_mode_authorlink {
+ color: #83a598;
+}
+
+.dark_mode_paperlink {
+ color: #fb4934;
+}
+
+.dark_mode_extlink {
+ color: #8ec07c;
+}
+
+.dark_mode_jourlink {
+ color: #8ec07c;
+}
+
+.dark_mode_body {
+ background-color: #1d2021;
+ color: #fbf1c7;
+ font-weight: 500;
+}
+
+.dark_mode_navbar {
+ background-color: #ebdbb2;
+}
+
+.dark_mode_navbar_a {
+ color: #f2f2f2;
+}
+
+.dark_mode_navbar_a_hover {
+ background: #3c3836;
+ color: #f9f5d7;
+}
+
+.dark_mode_ball {
+ background: #fbf1c7;
+}
+
+.dark_mode_style-one {
+ border: 0;
+ height: 0.1em;
+ background: #f9f5d7;
+ background-image: -webkit-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -moz-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -ms-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -o-linear-gradient(left, #282828, #f9f5d7, #282828);
+}
+
+.dark_mode_style-zero {
+ border: 0;
+ height: 0em;
+ background: #f9f5d7;
+ background-image: -webkit-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -moz-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -ms-linear-gradient(left, #282828, #f9f5d7, #282828);
+ background-image: -o-linear-gradient(left, #282828, #f9f5d7, #282828);
}
\ No newline at end of file