17370845950

通过 localstorage 实现跨页面、跨会话的暗色模式状态记忆，确保用户切换后刷新或跳转页面时自动恢复选中状态，并保持 ui 一致性。

要在多页面网站中实现暗色模式的“状态记忆”，核心在于将用户的选择（即复选框是否被勾选）持久化存储，并在每个页面加载时读取并同步到 DOM。localStorage 是最轻量、兼容性好且无需后端支持的理想方案。

以下是一个完整、健壮的实现方案：

✅ 基础 HTML 结构（保持不变）

✅ JavaScript 初始化与同步逻辑

将以下脚本放入每个页面的

// 从 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');
  }

该方案零依赖、无服务端交互，完美支持静态网站，且具备良好的可维护性与扩展性。只要所有页面共用同一套逻辑，即可实现真正一致的用户体验。