css变量实现一键切换的前提是所有主题变量必须定义在:root中且样式全部使用var(--x)；否则setproperty修改无效，因变量未被读取而静默回退到默认值。
CSS变量能实现真正的一键切换，但前提是变量必须定义在 :root，且所有样式都显式使用 var(--x)；否则改了也白改。
为什么改了 setProperty 没反应？
不是 JS 写错了，而是 CSS 变量根本没被读到——浏览器静默 fallback 到继承值或初始值，不报错、不警告。
-
--color-bg必须声明在:root里，写在.dark或body中，子元素取不到 - 大小写和双短横严格敏感：
--BgColor、--bg_color、bg-color全部无效 - 开发者工具中「计算样式」若仍显示
var(--bg-color)而未展开成具体颜色，说明变量未定义或拼写错误 - 第三方组件（如 Ant Design）若没启用 CSS 变量支持，其内部 class 不会响应你的
var()
哪些地方必须手动替换成 var(--x)？
CSS 变量不会自动扫描旧代码。你得逐个替换显式值，漏一处就断一层主题控制链。
-
background-color、color、border-color、box-shadow、outline-color -
::before和::after中的background、color、border（图标类装饰最常漏） - SVG 的
fill和stroke，必须显式写成fill: var(--icon-color) - 表单状态伪类：
input:focus、button:active、select:disabled
JS 切换主题时三个高发错误
只调 document.documentElement.style.setProperty() 不够，多数闪屏、错色、回退失效都源于这几个疏漏。
- HTML
里没预设初始data-theme：浏览器先按默认 CSS 渲染，JS 执行后再切，必然 FOUC。正确做法是：<script>document.documentElement.dataset.theme = localStorage.getItem('ui-theme') || 'light';</script> - 只改
dataset.theme却忘了localStorage.setItem()，刷新后变回默认 - 用
setProperty('--hue', '240')但:root里根本没声明--hue，此时var(--hue)无定义，fallback 失效，整页颜色崩掉
[data-theme="dark"] :root 比 :root.dark 更可靠
属性选择器权重固定为 110，远高于普通 class（10），不易被业务样式意外覆盖；同时避免命名冲突，也兼容 SSR 场景下服务端无法执行 JS 的情况。
复杂点在于：CSS 变量本身不触发重绘，依赖它的属性（比如 background-color）必须靠 class 或属性切换来触发样式重解析——所以光改变量值不够，还得确保选择器权重能压过旧规则，且 HTML 根节点上真实存在对应属性或 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
