yc4646/code.academic_webpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added dark mode.

Browse Source
This commit is contained in:
Chen Yang
2025-06-21 18:01:13 +08:00
parent bedc40ad39
commit b762ae5f26
2 changed files with 124 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@@ -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">

105
style.css
View File

@@ -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);
}