直接修改 :root 中的 css 变量可一键切换主题，但需确保所有颜色均使用 var(--x)、无 js 硬编码或第三方库绕过；变量必须在 :root 中正确定义且大小写、双短横线严格匹配，否则静默失效。
直接改 :root 里的变量值就能一键切换，但前提是所有颜色都用了 var(--x)，且没被 JS 硬编码、内联样式或第三方库绕过——否则改了也白改。
为什么 var(--color) 改了没反应
不是语法错，大概率是变量根本没定义，或作用域断了。浏览器不报错，只会静默 fallback 到继承值或默认值（比如文字变成 inherit 后看不见）。
-
--color-primary必须在:root中声明，写在.theme-dark或body里会导致子元素取不到 - 大小写敏感：
--PrimaryColor≠--primarycolor≠--primary-color - 漏掉双短横线（比如写成
primary-color）会被浏览器完全忽略，不报错也不生效 - 开发者工具里检查「计算样式」，如果显示仍是
var(--x)而没展开成具体值，说明变量未定义或拼写错误
哪些地方必须手动替换成 var(--x)
CSS 变量不会自动扫描旧样式。你得逐个替换显式颜色值，否则那些地方永远不受控。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
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 - 第三方 UI 库（如 Ant Design）若未开启 CSS 变量支持，其内部 class 不会响应你的变量
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 失效，整页颜色崩掉
:root[data-theme="dark"] 比 :root.dark 更可靠
用属性选择器覆盖比 class 选择器更稳，尤其在复杂项目中。
-
[data-theme="dark"] :root权重固定为 110，远高于普通 class（10），不易被业务样式意外覆盖 - 避免命名冲突：业务代码里可能已用
.dark做其他用途，而data-theme是语义明确的控制开关 - 第三方库若支持 CSS 变量，通常也监听
data-theme，兼容性更好
最易被忽略的是 fallback 值和加载顺序：var(--primary-color, #3b82f6) 里的后备值不是可选，而是防止变量未定义时样式彻底消失的底线；你的自定义 :root 块必须排在框架 CSS（如 Bootstrap、Ant Design）之后，否则会被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
