直接用localStorage存主题名（如"dark"或"light"），页面加载时读取并应用，切换时同步更新DOM与存储；初始化须在DOMContentLoaded后执行，fallback至系统偏好，监听storage事件实现跨标签页同步。
直接用 localStorage 存主题名（比如 "dark" 或 "light"），页面加载时读取并应用，切换时更新存储即可。关键是要在 DOM 就绪后立即读取、同步样式，并确保切换逻辑覆盖所有相关样式节点。
初始化时读取并应用主题
页面加载后第一时间检查 localStorage 中是否存有主题配置，有则直接设置 document.documentElement 的 data-theme 属性（或 class），再让 CSS 通过属性选择器生效：
- 推荐用
data-theme="dark"这类语义化属性，比 class 更易管理主题状态 - 务必在
DOMContentLoaded或document.readyState === 'complete'后执行，避免 DOM 尚未就绪导致样式未应用 - 如果没存主题，可 fallback 到系统偏好（
window.matchMedia('(prefers-color-scheme: dark)')）或默认值
切换主题时同步更新 localStorage 和 DOM
用户点击换肤按钮后，除了修改 DOM，必须立刻写入 localStorage，否则刷新就丢失：
- 用
localStorage.setItem('theme', 'dark')保存字符串值，不要存对象或布尔值（避免 JSON 序列化开销） - 同时更新
document.documentElement.dataset.theme = 'dark'，触发 CSS 重绘 - 建议加一层防抖或判断：只有主题实际变化时才写入，避免无意义的 storage 操作
监听跨标签页的主题变更
用户可能在另一个标签页切换了主题，当前页需要响应。利用 storage 事件监听同源下其他窗口对 localStorage 的修改：
立即学习“Java免费学习笔记（深入）”；
- 监听
window.addEventListener('storage', e => { if (e.key === 'theme') applyTheme(e.newValue) }) - 注意：该事件不会在触发修改的当前窗口触发，只通知其他同源窗口
-
e.newValue是新值，e.oldValue是旧值，可用于做平滑过渡或日志记录
清理与兼容性注意点
localStorage 是持久的，但需考虑边界情况：
- 用户手动清空缓存或使用隐私模式时，
localStorage为空，代码要有兜底逻辑 - IE10+ 支持
localStorage，如需支持更低版本，可用cookie或sessionStorage降级（但不持久） - 避免存大量数据——主题只需一个字符串，完全够用；不要把整个主题色板或 CSS 变量都塞进去
