利用 localstorage 在页面加载时读取并应用上次保存的主题状态，点击切换时同步更新 dom 与存储，即可让静态 html 网站记住用户偏好，刷新、跳转或重开浏览器后自动恢复暗黑/亮色模式。
利用 localstorage 在页面加载时读取并应用上次保存的主题状态，点击切换时同步更新 dom 与存储，即可让静态 html 网站记住用户偏好，刷新、跳转或重开浏览器后自动恢复暗黑/亮色模式。
要在静态 HTML 网站中实现“记住上一次主题”的能力，核心在于将用户选择持久化落地到客户端存储，而非仅依赖内存中的 DOM 操作。localStorage 是最轻量、兼容性最佳（支持 IE8+ 及所有现代浏览器）、无需服务端参与的解决方案，完美适配静态站点需求。
✅ 正确实现步骤（含防错与最佳实践）
1. 首屏无闪加载：初始化必须前置
为避免页面先以默认主题渲染、再突然变色导致的“闪白”（flash of light content），主题初始化脚本必须放在 内、所有 CSS <link> 标签之前，并直接操作 document.documentElement：
<script>
// ⚠️ 关键：必须在任何 CSS 加载前执行
const saved = localStorage.getItem('dark-mode');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// 优先级：用户选择 > 系统偏好 > 默认亮色
const isDark = saved !== null ? JSON.parse(saved) : prefersDark;
document.documentElement.classList.toggle('dark-mode', isDark);
// 同步更新 meta color-scheme（提升 Safari/Chrome 地址栏一致性）
const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
if (metaColorScheme) {
metaColorScheme.content = isDark ? 'dark light' : 'light dark';
}
</script><link rel="stylesheet" href="style.css">
? 提示：使用
JSON.parse()安全解析布尔值，避免'true' === true类型误判；用classList.toggle('dark-mode', boolean)替代手动add/remove，语义清晰且幂等。
2. 切换逻辑：封装 + 同步 + 防重复
将切换行为封装为可复用函数，并确保每次操作都同步 DOM、存储与元信息：
const html = document.documentElement;
const button = document.querySelector('.contrast-toggle');
function toggleDarkMode() {
const isDark = html.classList.contains('dark-mode');
const newIsDark = !isDark;
html.classList.toggle('dark-mode', newIsDark);
localStorage.setItem('dark-mode', JSON.stringify(newIsDark));
// 更新 meta 标签，保持浏览器 UI 一致
const meta = document.querySelector('meta[name="color-scheme"]');
if (meta) {
meta.content = newIsDark ? 'dark light' : 'light dark';
}
}
button?.addEventListener('click', e => {
e.preventDefault();
toggleDarkMode();
});
// 可选：支持快捷键（如 Ctrl+D）
document.addEventListener('keydown', e => {
if (e.ctrlKey && e.key === 'd') {
e.preventDefault();
toggleDarkMode();
}
});
3. 多标签页同步（进阶必备）
若用户在另一个标签页中切换了主题，当前页也应响应。监听 storage 事件即可实现跨标签页同步：
window.addEventListener('storage', e => {
if (e.key === 'dark-mode') {
const isDark = e.newValue ? JSON.parse(e.newValue) : false;
html.classList.toggle('dark-mode', isDark);
const meta = document.querySelector('meta[name="color-scheme"]');
if (meta) meta.content = isDark ? 'dark light' : 'light dark';
}
});
4. CSS 适配建议：语义化 + 渐进增强
- ✅ 推荐使用
html.dark-mode选择器（而非body.dark-mode），确保根级伪元素、滚动条、:root变量等全部生效； - ✅ 若使用 CSS 自定义属性，务必为两种模式显式声明变量，不要仅依赖
@media (prefers-color-scheme: dark)：
:root {
--bg: #fff;
--text: #000;
}
html.dark-mode {
--bg: #1a1a1a;
--text: #eee;
}
body {
background-color: var(--bg);
color: var(--text);
}
⚠️ 注意事项总结
- localStorage 清除即失效：这是客户端存储的本质限制，无需过度担忧；如需长期账户级记忆，才需服务端 API；
-
勿覆盖系统偏好逻辑：
prefers-color-scheme仅作首次访问的 fallback，默认值，绝不能替代用户主动选择； -
无障碍支持：为切换按钮添加
aria-pressed属性，实时反映状态（例如button.setAttribute('aria-pressed', isDark)）； - 性能友好：所有操作均为同步、轻量 DOM 操作，无阻塞渲染风险。
通过以上方案，你的静态网站即可在零后端、零框架的前提下，提供专业级的暗色模式体验——持久、平滑、跨设备、可访问。
