通过 localstorage 存储用户偏好，可实现复选框状态在多页面间自动同步，并在浏览器重启后仍保持生效，无需服务端参与，轻量可靠。

要让暗色模式开关（checkbox）在网站所有 HTML 页面中“记住”用户选择，并在切换页面、刷新甚至关闭浏览器后依然生效，核心在于将用户操作持久化到浏览器本地存储，并在每个页面加载时自动还原状态。

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

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

✅ JavaScript 实现（推荐放在

// 1. 从 localStorage 读取并设置 checkbox 状态
function syncCheckboxFromStorage() {
  const checkbox = document.querySelector('#toggle');
  if (!checkbox) return;

  const saved = localStorage.getItem('dark-mode');
  checkbox.checked = saved === 'true';

  // 同时应用对应主题类（关键！否则仅勾选无视觉效果）
  if (checkbox.checked) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}

// 2. 监听 checkbox 变化，保存到 localStorage
document.addEventListener('DOMContentLoaded', () => {
  const checkbox = document.querySelector('#toggle');
  if (!checkbox) return;

  checkbox.addEventListener('change', (e) => {
    localStorage.setItem('dark-mode', e.target.checked.toString());

    // 同步 body 或 html 的主题类（建议作用于  以支持 CSS :root 变量）
    if (e.target.checked) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  });
});

// 3. 初始化：页面加载时同步状态
syncCheckboxFromStorage();

// 4. 【可选增强】监听其他标签页的 storage 变更（如用户在另一窗口切换了主题）
window.addEventListener('storage', (e) => {
  if (e.key === 'dark-mode') {
    syncCheckboxFromStorage();
  }
});

✅ 对应 CSS 主题适配（示例）

/* 默认浅色主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 暗色主题样式 */
.dark {
  --bg-color: #1e1e1e;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

⚠️ 注意事项

• 务必在 DOMContentLoaded 后绑定事件，避免因 DOM 未就绪导致 querySelector 返回 null；
• localStorage 只能存储字符串，因此使用 .toString() 而非 JSON.stringify()（后者会存成 "true"/"false" 字符串，但 JSON.parse("true") 才能转布尔；直接用 'true' === value 更简洁安全）；
• window.storage 事件仅在同源其他标签页修改 localStorage 时触发，用于跨窗口实时同步，本场景中虽非必需，但加入后体验更一致；
• 若使用框架（如 Vue/React），应结合其响应式机制封装逻辑，而非直接操作 DOM。

该方案零依赖、兼容所有现代浏览器，且完全客户端运行，是实现跨页暗色模式记忆的最佳实践。