通过 localstorage 实现跨页面、跨会话的暗色模式状态记忆，确保用户切换后刷新或跳转页面时自动恢复选中状态，并保持 ui 一致性。
要在多页面网站中实现暗色模式的“状态记忆”，核心在于将用户的选择（即复选框是否被勾选）持久化存储，并在每个页面加载时读取并同步到 DOM。localStorage 是最轻量、兼容性好且无需后端支持的理想方案。
以下是一个完整、健壮的实现方案：
✅ 基础 HTML 结构（保持不变）
<input type="checkbox" id="toggle"> <label for="toggle" class="togglebtn"> <i id="toggle-img" class="fa-solid fa-moon"></i> </label>
✅ JavaScript 初始化与同步逻辑
将以下脚本放入每个页面的 <head> 中（推荐封装为 dark-mode.js 并全局引入）：
// 从 localStorage 读取并同步复选框状态
function syncDarkModeState() {
const checkbox = document.querySelector('#toggle');
if (!checkbox) return;
const saved = localStorage.getItem('dark-mode');
const isChecked = saved === 'true';
checkbox.checked = isChecked;
// 同步应用主题类（关键：影响实际样式）
document.documentElement.classList.toggle('dark', isChecked);
}
// 监听用户切换并持久化
document.addEventListener('DOMContentLoaded', () => {
const checkbox = document.querySelector('#toggle');
if (!checkbox) return;
checkbox.addEventListener('change', (e) => {
localStorage.setItem('dark-mode', String(e.target.checked));
// 同时更新文档类，确保样式即时生效
document.documentElement.classList.toggle('dark', e.target.checked);
});
// 页面加载时初始化
syncDarkModeState();
// 监听其他标签页的 storage 变更（如用户在另一窗口切换了模式）
window.addEventListener('storage', (e) => {
if (e.key === 'dark-mode') {
syncDarkModeState();
}
});
});⚠️ 注意事项与最佳实践
- 务必添加 document.documentElement.classList.toggle('dark', ...)：仅设置 checkbox 状态不会改变样式，需配合 CSS 类（如 .dark { --bg: #121212; }）和对应样式规则。
- 使用 String() 而非 JSON.stringify()：localStorage 只支持字符串值；String(true) === 'true' 更简洁安全，避免 JSON.stringify(true) === 'true' 的冗余。
- DOMContentLoaded 保障执行时机：确保 DOM 元素存在后再绑定事件，避免 querySelector 返回 null。
- 跨标签页同步依赖 storage 事件：当用户在另一个浏览器标签中更改暗色模式时，当前页面也能响应更新（需同源）。
-
可选增强：首次访问时根据系统偏好自动启用暗色模式：
if (saved === null && window.matchMedia('(prefers-color-scheme: dark)').matches) { localStorage.setItem('dark-mode', 'true'); }
该方案零依赖、无服务端交互，完美支持静态网站，且具备良好的可维护性与扩展性。只要所有页面共用同一套逻辑，即可实现真正一致的用户体验。
