必须作用于body标签，因为主题样式依赖body.dark选择器触发:root变量覆盖；若加在其他元素上，:root不响应导致切换无效；常见错误是操作app节点或documentelement，正确做法是始终用document.body并确保初始class硬编码到html中。
body.classList.toggle('dark') 为什么必须作用于 标签
因为主题样式规则大多依赖 body.dark 选择器来触发变量覆盖，比如 body.dark :root { --bg: #121212; }。如果把 dark 类加到 <div id="app"></div> 或其他容器上，:root 不会响应，所有 var(--bg) 仍取默认值——切换无效。
常见错误是误操作 document.getElementById('app').classList.toggle('dark')，结果页面颜色纹丝不动。确认目标节点：永远用 document.body。
- 别改
document.documentElement（那是），除非你用的是 Bootstrap 5.3+ 的data-bs-theme方案 - 别在
DOMContentLoaded之后才执行 toggle —— 这时 DOM 已渲染，用户会看到一帧亮色再变暗 - 确保 CSS 中没写成
.dark body这种反向选择器，它匹配的是「有 dark 类的元素内部的 body」，根本不存在
localStorage.setItem('theme', ...) 存什么、怎么读才不炸
存字符串 "dark" 或 "light" 就够了，别存布尔值、对象或 JSON。读取时 localStorage.getItem('theme') 返回的是 null（首次访问）或字符串，直接赋给 classList 会出错。
正确写法：
const saved = localStorage.getItem('theme');
if (saved === 'dark') {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
注意：不能写成 document.body.classList.toggle(saved)，因为 toggle('null') 会添加一个叫 null 的类，CSS 无法识别。
- 写入时机：每次点击按钮后立刻执行
localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light') - 避免在页面加载前就调用
localStorage.getItem—— Safari 私密模式下可能抛SecurityError，需包 try/catch - 不要用
JSON.stringify包一层，纯字符串最稳，解析零风险
为什么页面会闪一下？关键在 初始 class 和 CSS 加载顺序
闪屏本质是浏览器先按默认样式渲染，再等 JS 执行完才加上 dark 类——中间存在视觉空档。解决方案不是加 transition，而是让初始状态「从一开始就是对的」。
最可靠做法：服务端或构建时直接在 HTML 的 标签里输出 class，例如： 或 。前端 JS 只负责后续同步和 storage 更新。
- 如果只能前端控制，至少在
里放一段内联<script></script>，在 DOM 构建前就读取 localStorage 并设置 class - 把主题变量声明（
:root { --bg: ...; }）放在内联<style></style>中，确保变量定义早于任何渲染 - 避免把主题 CSS 放在外部文件末尾，否则切换 class 后浏览器要等文件加载完才重绘
prefers-color-scheme 只能当 fallback，不能当主逻辑
系统偏好（window.matchMedia('(prefers-color-scheme: dark)')）只该用于「用户从未手动选过主题」时的初始化兜底。一旦用户点过按钮，就必须以 localStorage 为准——否则刷新后回到系统设置，违背用户意图。
典型错误是监听 matchMedia().addEventListener 并自动切 theme，这会导致：用户刚关掉夜间模式，系统夜间开关一开，页面又黑了。
- 初始化顺序必须是：先查
localStorage→ 有值就用；无值再查matchMedia→ 设默认并写入localStorage -
matchMedia的监听器只做一件事：当用户没手动设置过，且系统偏好变更时，才更新页面（但这种情况极少，多数产品可忽略） - 别在 CSS 里只写
@media (prefers-color-scheme: dark) { :root { ... } }就完事——它无法响应 JS 主动切换，必须配合 class 或 data 属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
