用户切换主题后页面刷新仍保持上次选择，关键在于将主题偏好存入 localStorage 并在页面加载时读取应用：点击按钮时用 setItem 存储小写主题值并同步 data-theme 属性；DOMContentLoaded 时 getItem 读取，无值则 fallback 到系统偏好；可监听 matchMedia 变化但不覆盖用户显式选择；CSS 通过 data-theme 和 CSS 变量实现样式复用。
用户切换主题后，页面刷新仍保持上次选择，关键在于把偏好存进 localStorage，并在页面加载时读取并应用。
保存主题偏好到 localStorage
当用户点击切换按钮（比如一个「日/夜」开关）时，把当前主题值（如 "dark" 或 "light"）写入 localStorage：
- 使用
localStorage.setItem("theme", "dark")存储字符串值 - 建议统一用小写字符串，避免大小写歧义
- 可配合
document.documentElement.setAttribute("data-theme", "dark")同步更新 HTML 根元素属性，方便 CSS 控制样式
页面加载时读取并应用主题
在 JS 初始化阶段（例如 DOMContentLoaded 事件中），优先从 localStorage 获取主题设置：
- 用
localStorage.getItem("theme")读取值，可能返回null - 若存在则直接设为当前主题；否则回退到系统偏好或默认浅色
- 推荐结合
window.matchMedia("(prefers-color-scheme: dark)").matches检测系统设置作为 fallback
同步页面与系统主题变化（可选增强）
如果希望用户修改系统深色模式时，网页也自动响应（不依赖手动切换），可监听媒体查询变化：
- 用
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ...) - 但注意：仅当 localStorage 中无记录时才响应系统变化，避免覆盖用户主动选择
- 此时可更新
data-theme属性，并视情况是否写回 localStorage（通常不覆盖，尊重用户显式选择）
CSS 配合 data-theme 实现主题切换
HTML 根元素带 data-theme="dark" 时，CSS 可这样定义：
[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }[data-theme="light"] { --bg: #ffffff; --text: #333333; }- 主体样式用
background-color: var(--bg); color: var(--text); - 无需重复写两套完整样式，维护成本更低
不复杂但容易忽略：localStorage 是域内持久的，换设备或清缓存会丢失；如需跨设备同步，得对接服务端存储。
