From b762ae5f26cfbae2d2d30ca14023250573e9b7f6 Mon Sep 17 00:00:00 2001 From: Chen Yang Date: Sat, 21 Jun 2025 18:01:13 +0800 Subject: [PATCH] Added dark mode. --- index.html | 41 +++++++++++++++++++++ style.css | 105 ++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 124 insertions(+), 22 deletions(-) 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