核心是用localStorage.setItem()存主题字符串（如'dark'），页面加载时用getItem()读取并应用data-theme属性，配合CSS变量实现刷新不丢失；需兼容系统偏好、支持清除及降级处理。
用 localStorage 实现网页主题切换，核心是把用户选中的主题（比如 dark、light、blue）存下来，页面一打开就自动读取并应用，做到“关掉再打开还是原来的样子”。关键不在存数据本身，而在怎么存得稳、读得准、切得顺、退得回。
主题数据怎么存才可靠
每次用户点击切换，必须同步更新 DOM 和 localStorage，不能只改样式不存值。推荐用固定 key，例如 'user-theme' 或 'app-theme'，避免和其它模块冲突。
- 存字符串最稳妥：localStorage.setItem('user-theme', 'dark')
- 若需存多参数（如主题+字体大小+主色），先用 JSON.stringify() 打包成字符串，读取时再 JSON.parse()
- 首次访问时检查 typeof Storage !== 'undefined'，不支持的浏览器直接跳过存储，降级为纯内存记忆
- 不要在 DOM 尚未就绪时写入或读取，确保脚本在 DOMContentLoaded 后执行
页面加载时如何无闪还原
初始化阶段要一次定调：先查 localStorage，没值再查系统偏好（prefers-color-scheme），最终统一写到 <html> 的 data-theme 属性上，CSS 用属性选择器驱动样式。
- 用 document.documentElement.setAttribute('data-theme', theme) 控制根节点，比反复操作 class 更干净
- 避免只 addClass 不 removeClass，建议先清空所有主题类，再设新类，或用 classList.replace()
- 默认主题不要提前写入 localStorage，等用户第一次手动选择后再存，否则会覆盖系统偏好
- CSS 中定义过渡效果，如 transition: background-color 0.2s, color 0.2s，但不对 data-theme 属性做动画
切换操作必须原子化执行
点一下按钮，背后要完成四件事：确定目标主题 → 更新 localStorage → 修改 data-theme 属性 → 触发样式生效。任何一步中断都可能造成 UI 和存储不一致。
- 封装成统一函数，例如 setTheme('dark')，内部顺序执行，不暴露中间状态
- 写入后可立即读取验证：localStorage.getItem('user-theme') === 'dark'，方便调试或 fallback
- 监听系统偏好变化（window.matchMedia('(prefers-color-scheme: dark)')）仅作为兜底，且仅在 localStorage 为空时响应
- 跨标签页同步靠 storage 事件：监听 window.addEventListener('storage', e => { if (e.key === 'user-theme') applyTheme(e.newValue) })
CSS 主题规则怎么组织更易维护
样式层建议采用 data 属性 + CSS 自定义变量 双驱动：:root 定义基础变量，各主题下覆盖对应值，HTML 用 data-theme 控制作用域。
- 例如：:root[data-theme='dark'] { --bg: #1a1a1a; --text: #f0f0f0; }
- 所有颜色、间距、圆角等都走 CSS 变量，主题切换只需换 data-theme，无需重写整套样式
- 提供“恢复默认”入口，调用 localStorage.removeItem('user-theme')，然后重载或触发一次 setTheme('light')
- 编辑器、仪表盘等复杂组件可单独用前缀 key，如 'editor-theme'，避免全局 key 冲突
