Added dark mode.

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";
+            // }
+        }
     </script>
 </head>
 
@@ -25,6 +63,7 @@
         <a href="#teaching">Teaching</a>
         <a href="#research">Research</a>
         <a href="#service">Service</a>
+        <a href="" onclick="toggleDarkLight();return false">Toggle Light/Dark</a>
     </div>
 
     <div class="main" id="home">
@@ -57,6 +96,8 @@
         </table>
     </div>
 
+    <!-- [<a href="" onclick="toggleDarkLight();return false">Toggle Dark/Light</a>] -->
+
 
 
     <hr id="teaching" class="style-zero">

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;
+  background: #f9f5d7;
-  color: black;
+  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: #282828;
-  background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -webkit-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -moz-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -ms-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -o-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
 }
 
 hr.style-zero {
   border: 0;
   height: 0em;
-  background: #333;
+  background: #282828;
-  background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -webkit-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -moz-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -ms-linear-gradient(left, #f9f5d7, #282828, #f9f5d7);
-  background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+  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);
 }