通过 localstorage 在页面加载时读取并应用用户上次选择的主题，配合 css 类切换实现深色/浅色模式的持久化保存，避免刷新后重置为默认样式。
在构建支持主题切换（如深色/浅色模式）的网站时，一个常见痛点是：用户手动切换主题后，一旦刷新页面，设置即丢失，页面恢复为初始状态。根本原因在于浏览器内存中的 DOM 状态（如 classList）不会自动跨刷新保留。解决该问题的核心思路是——将用户偏好“落地”到持久化存储中，并在每次页面加载时主动还原。
推荐使用 localStorage，它具备以下优势：
✅ 浏览器原生支持，无需额外依赖；
✅ 同源下数据长期有效（除非手动清除或代码删除）；
✅ 仅存储字符串，轻量且足够表达主题状态（如 "light" 或 "dark"）。
以下是完整可运行的实现方案：
HTML 结构（含触发按钮）：
<button id="theme-toggle">Toggle Theme</button>
JavaScript 逻辑（含初始化与交互）：
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
// 页面加载时：从 localStorage 恢复主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark');
} else {
body.classList.remove('dark'); // 确保 light 模式干净移除 dark 类
}
// 点击切换时：更新界面 + 持久化保存
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark');
const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
localStorage.setItem('theme', currentTheme);
});
CSS 主题样式（建议使用 class 控制，避免内联样式）：
/* 默认为浅色主题（无需额外 class） */
body {
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s, color 0.3s;
}
/* 深色主题覆盖 */
body.dark {
background-color: #222222;
color: #ffffff;
}
? 关键注意事项：
- 初始化逻辑（读取 localStorage 并设置 class）必须放在事件监听器注册之前，否则首次加载无法生效；
- 使用 body.classList.add/remove 而非 setAttribute，确保类操作原子、安全；
- 添加 transition 可使颜色切换更平滑，提升用户体验；
- 若需支持系统级暗色偏好（prefers-color-scheme），可在初始化时作为 fallback：
if (!savedTheme) { const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; localStorage.setItem('theme', systemPrefersDark ? 'dark' : 'light'); }
该方案简洁、可靠、兼容性好（支持所有现代浏览器），是前端实现用户偏好持久化的标准实践。
