主题切换需将CSS变量定义在:root下以确保全局可访问，JS通过setProperty动态修改变量值，并结合localStorage持久化用户偏好，同时用prefers-color-scheme做初始化兜底。
怎么用 :root 定义可切换的主题变量
主题切换本质是批量替换颜色、间距、圆角等基础值，CSS 变量必须挂载在 :root 上才能被全局读取。写在其他选择器里（比如 .theme-dark）会导致作用域受限，JS 修改后部分组件不响应。
常见错误是把变量写成 .dark { --color-bg: #1a1a1a; }——这只能影响 .dark 内部的元素，且 JS 无法通过 document.documentElement.style.setProperty 直接覆盖它。
-
:root是文档根元素（即html），所有 CSS 变量放这里才真正“全局” - 变量名建议带语义前缀，比如
--color-primary、--space-md，避免和未来 CSS 原生属性冲突 - 初始值要设默认主题（通常是亮色），暗色主题靠 JS 覆盖，而不是靠 class 切换整套样式表
:root {
--color-bg: #ffffff;
--color-text: #333333;
--border-radius: 4px;
}
JS 修改 document.documentElement.style 的正确姿势
直接改 document.documentElement.className 加 class 是旧方案，容易漏样式、难维护；现代做法是用 JS 动态写入变量值，让 CSS 自动计算。
关键点：不能用 setAttribute('style', '...') 全量覆盖，会清掉其他内联 style；必须用 setProperty 逐个设置。
- 每次切换只调用
element.style.setProperty('--color-bg', '#121212')，安全、可叠加 - 推荐把主题配置抽成对象，避免硬编码：
const themes = { light: { '--color-bg': '#fff' }, dark: { '--color-bg': '#121212' } } - 注意浏览器兼容性：IE 不支持 CSS 变量，如果还要兼容，得 fallback 到 class 方案，但逻辑要分开
为什么 prefers-color-scheme 不能替代 JS 主题切换
系统级媒体查询 @media (prefers-color-scheme: dark) 只能响应系统设置，用户手动点“切暗色”时它不会触发重算，更没法存用户偏好到 localStorage。
真实场景需要三者协同：系统默认值 + 用户主动选择 + 持久化记忆。只靠 CSS 媒体查询，等于放弃控制权。
-
prefers-color-scheme适合做初始化兜底，比如页面首次加载时读取系统偏好并设初始变量 - 但用户点击切换按钮后，必须由 JS 显式写入变量，并同步存到
localStorage，否则刷新就丢 - 别忘了监听系统变化：
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，但仅用于更新默认行为，不替代用户手动选择
切换瞬间的闪烁问题怎么压？
从白到黑闪一下，本质是 HTML 渲染完成、CSS 变量还没被 JS 注入的空窗期。不是 JS 慢，是执行时机不对。
最稳解法：服务端或构建时注入初始主题类，或用内联 script 在 就写变量。但多数前端项目只能靠客户端逻辑压。
- 把初始化 JS 放在
最顶部，用document.documentElement立即设变量，早于任何样式解析 - 避免在
DOMContentLoaded或load事件里才开始设——那时页面可能已渲染过一次 - 如果用了 SSR 或静态生成，优先在 HTML 模板里根据用户上次选择，直接输出
主题切换不是“加个 class”就能完事的事，变量作用域、JS 注入时机、用户意图留存，三个地方错一个，就会出现闪、不生效、关页面就还原这些具体问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
