body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.5s ease; /* 添加背景色过渡效果 */
color: #000; /* 默认文字颜色为黑色 */
}
h1 {
text-align: center;
color: #3b5998;
transition: color 0.5s ease; /* 添加文字颜色过渡效果 */
}
div {
text-align: center;
margin-top: 10px;
}
a {
display: block;
padding: 10px;
background-color: #3b5998;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
margin: 10px auto;
width: 200px;
}
a:hover {
background-color: #4267B2;
}
.night-mode body {
background-color: #000; /* 夜间模式下背景色为黑色 */
color: #fff; /* 夜间模式下文字颜色为白色 */
}
.night-mode h1 {
color: #fff; /* 夜间模式下标题文字颜色为白色 */
}
#mode-switch-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
color: #000; /* 默认按钮图标颜色为黑色 */
transition: color 0.5s ease; /* 添加图标颜色过渡效果 */
}
.night-mode #mode-switch-btn {
color: #fff; /* 夜间模式下按钮图标颜色为白色 */
}