/* 进阶版 主要增加图标动画 如果不用可直接用版本二（删除进阶版css以及html里的和其他地方不用动） */
/* 夜间模式按钮 */
#dark-mode-button {
position: fixed;
bottom: 35px;
right: 5px;
width: 40px;
height: 40px;
border: none;
background-color: rgba(128, 128, 128, 0.8);
border-radius: 6px;
cursor: pointer;
overflow: hidden; /* 隐藏溢出的内容 */
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
/* 夜间模式按钮图标 */
#dark-mode-button .icon {
position: absolute;
width: 100%;
height: 100%;
background-size: 60%; /* 调整图标大小 */
background-position: center; /* 图标居中 */
background-repeat: no-repeat;
transition: transform 0.3s ease-in-out;
}
/* 默认图标（夜间图标） */
#dark-mode-button .icon.night {
background-image: url('/images/夜间.svg');
transform: translateX(0);
}
/* 白天图标 */
#dark-mode-button .icon.day {
background-image: url('/images/白天.svg');
transform: translateX(-100%);
}
/* 夜间模式下的图标位置 */
html.dark-theme #dark-mode-button .icon.night {
transform: translateX(100%);
}
html.dark-theme #dark-mode-button .icon.day {
transform: translateX(0);
}
/* 版本二
#dark-mode-button {
position: fixed;
bottom: 35px;
right: 10px;
width: 40px;
height: 40px;
background-image: url('/images/夜间.svg');
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
border: none;
background-color: rgba(128, 128, 128, 0.8);
border-radius: 6px;
cursor: pointer;
transition: background-image 0.3s;
z-index: 1000;
}
html.dark-theme #dark-mode-button {
background-image: url('/images/白天.svg');
}
*/
/* 如果不用定时日间、夜间模式，将css链接下边的JS替换成一下代码 */
/*
(function () {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
document.documentElement.classList.add('dark-theme'); // 直接写入 标签
}
})();
*/