要保存暗模式状态,可以使用以下方法:
HTML:
CSS:
/* 暗模式样式 */
body.dark-mode {
background-color: #111;
color: #fff;
}
JavaScript:
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const body = document.body;
// 检查 localStorage 中的暗模式状态
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// 根据暗模式状态设置初始样式
if (isDarkMode) {
body.classList.add('dark-mode');
darkModeToggle.checked = true;
}
// 监听暗模式切换事件
darkModeToggle.addEventListener('change', () => {
// 切换暗模式样式
body.classList.toggle('dark-mode');
// 更新 localStorage 中的暗模式状态
localStorage.setItem('darkMode', darkModeToggle.checked);
});
上述代码中,我们创建了一个复选框用于切换暗模式,使用 localStorage 存储暗模式状态。在页面加载时,我们会检查 localStorage 中的暗模式状态,并根据其值设置初始样式。当用户切换暗模式时,我们会更新样式,并将新的暗模式状态保存到 localStorage 中。
HTML:
CSS:
/* 明暗模式切换 */
input[type="checkbox"]#dark-mode-toggle {
display: none;
}
input[type="checkbox"]#dark-mode-toggle:checked ~ body {
background-color: #111;
color: #fff;
}
上述代码中,我们使用一个隐藏的复选框和相关的标签来实现暗模式切换。当复选框被选中时,我们使用 CSS 的 :checked 伪类来改变 body 元素的样式。
注意:这种方法无法保存暗模式状态,刷新页面后会重置为默认状态。如果需要保存状态,可以结合 JavaScript 和 localStorage 来实现。