应使用 document.documentelement 挂 dark/light class，并在页面加载时读取 localstorage.getitem('theme') 设置主题，点击切换时同步更新 class 和 localstorage；未设置时 fallback 到 prefers-color-scheme 系统偏好，并监听 change 事件保持同步。
怎么用 localStorage 记住用户上次选的主题
不存起来，刷新就回默认，等于白切。核心是读写 localStorage，不是靠 class 切换完就完事。
常见错误：只在点击时加 class，没同步存到 localStorage；或者读取时没做空值判断，getItem 返回 null 就直接塞给 document.body.classList.add()，报错。
- 页面加载时先读
localStorage.getItem('theme')，值为'dark'或'light'才设 class，其他情况走系统偏好或默认亮色 - 切换按钮点击后，先用
classList.toggle()更新 body，再立刻用localStorage.setItem('theme', 'dark')存下当前状态 - 别用
JSON.parse()包一层——字符串就存字符串，没必要序列化
为什么推荐用 prefers-color-scheme 做初始值 fallback
用户没点过按钮，又没存过记录，这时候该亮还是该暗？硬写死 light 会得罪深色党；全靠 JS 检测系统设置最合理。
注意：CSS 媒体查询能直接响应系统变化，但 JS 的 matchMedia 默认不监听变更，得手动加 addEventListener('change')，否则系统改了主题，网页不会自动跟。
立即学习“前端免费学习笔记（深入）”；
- 初始化时用
window.matchMedia('(prefers-color-scheme: dark)').matches判断一次 - 如果用户后续在系统里切了深浅模式，且你希望网页也跟着变，就得监听
matchMedia的change事件并更新 class 和localStorage - 不要在 CSS 里只写
@media (prefers-color-scheme: dark)就不管 JS 层——JS 层仍需主动同步状态，否则localStorage里还是旧值
document.documentElement 和 document.body 该用哪个挂 class
挂错位置会导致 CSS 选择器失效、变量未生效、动画卡顿。绝大多数情况应该用 document.documentElement（即 标签），不是 body。
原因：CSS 自定义属性（--bg-color）通常定义在 :root，而 :root 对应的就是 document.documentElement；挂到 body 上，变量作用域受限，子元素可能取不到。
- 统一用
document.documentElement.classList.add('dark')，删同理 - 如果用了 CSS-in-JS 或 Shadow DOM，另说；但纯 HTML/CSS 场景下，
html是唯一可靠锚点 - 检查浏览器开发者工具 Elements 面板，确认 class 确实出现在
上，而不是
按钮点击后没反应？重点查这三处
不是代码写错了，往往是执行时机或作用域问题。90% 的“点了没变化”都出在这几个地方。
-
querySelector拿不到按钮：脚本放在里，DOM 还没加载，改成DOMContentLoaded事件里执行，或把 script 放在前 - 事件监听写成
onclick = function(){...}覆盖了之前绑定的逻辑，一律用addEventListener('click', handler) - CSS 里没写对应主题规则：比如 JS 加了
darkclass，但 CSS 里只有.light { ... }，没写.dark { ... }，自然看不出变化
主题切换本身不难，难的是让每次刷新、每次系统变更、每次用户点击，状态都对得上。漏掉 localStorage 同步，或者 class 挂错节点，就会反复陷入“明明写了却没效果”的循环。
