要保持暗模式开关的状态在导航到其他页面时,可以使用本地存储(localStorage或sessionStorage)来保存用户的选择。当用户切换暗模式时,将其选择保存到本地存储中。然后,在每次加载新页面时,检查本地存储中的状态,并根据状态设置相应的CSS类。
下面是一个示例代码:
HTML:
暗模式开关示例
暗模式开关示例
CSS(styles.css):
body {
background-color: #ffffff;
color: #000000;
}
.dark-mode {
background-color: #000000;
color: #ffffff;
}
JavaScript(script.js):
// 检查本地存储中的状态并应用相应的CSS类
function checkDarkMode() {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
const themeStyle = document.getElementById('theme-style');
if (isDarkMode) {
themeStyle.href = 'dark-mode.css'; // 设置暗模式的CSS样式表
document.body.classList.add('dark-mode'); // 添加暗模式的CSS类
} else {
themeStyle.href = 'styles.css'; // 设置默认的CSS样式表
document.body.classList.remove('dark-mode'); // 移除暗模式的CSS类
}
}
// 监听暗模式开关的更改事件
function toggleDarkMode() {
const darkModeToggle = document.getElementById('dark-mode');
const isDarkMode = darkModeToggle.checked;
localStorage.setItem('darkMode', isDarkMode); // 将暗模式状态保存到本地存储
checkDarkMode(); // 检查并应用相应的CSS类
}
// 页面加载时检查暗模式状态并应用相应的CSS类
window.addEventListener('load', checkDarkMode);
// 监听暗模式开关的更改事件
document.getElementById('dark-mode').addEventListener('change', toggleDarkMode);
这个示例中,当用户切换暗模式时,将其选择保存到本地存储中。然后,在每次加载新页面时,通过检查本地存储中的状态,并根据状态设置相应的CSS类来保持暗模式开关的状态。