直接修改 --primary-color 可更换整套UI主色，但需确保其被组件显式引用（如 background-color: var(--primary-color)）、避免局部重定义、配合语义化命名、深色模式下重设变量值、运行时兼容性检测及正确调试解析结果。
直接改 --primary-color 就能换整套UI主色，但得先确保它被正确继承
CSS 变量（Custom Properties）不是写一次就全局生效的魔法，它依赖作用域和级联规则。如果你在 :root 里定义了 --primary-color: #007bff，但某个组件内部又写了 button { --primary-color: #dc3545 }，那按钮用的就是红色，而不是根变量。原型阶段最稳妥的做法是：所有颜色类名或组件样式都显式使用 var(--primary-color)，而不是靠继承覆盖。
- 别只在
:root定义就以为万事大吉，检查关键组件是否真的读取了该变量（比如background-color: var(--primary-color)） - 品牌色不止一个——通常还需
--secondary-color、--text-primary、--border-light等，建议用语义化命名，而非--color-1这类编号 - 原型中可配合 CSS 预处理器（如 Sass）做 fallback：
background-color: var(--primary-color, #007bff)，避免变量未定义时样式崩塌
用 @media + :root 切换深色/浅色主题时，别漏掉变量重定义
很多人以为加个 @media (prefers-color-scheme: dark) 就能自动切主题，其实只是触发条件，变量值还得手动重设。如果没在媒体查询里重新给 --primary-color 赋值，深色模式下 UI 仍会沿用浅色模式的变量值，导致文字看不清或对比度不足。
- 必须在
@media块内再次写:root { --primary-color: #0d6efd; --text-primary: #f8f9fa; } - 原型验证阶段建议用浏览器 DevTools 的“强制深色模式”功能（Chrome 的 Rendering 面板），比等系统设置更高效
- 避免在组件里硬编码颜色值，否则主题切换时这些地方会“掉队”
原型交付前，用 CSS.supports('color', 'var(--primary-color)') 检查兼容性底线
CSS 变量在 IE 中完全不支持，但即使现代浏览器，某些旧版安卓 WebView 或 Electron 内嵌渲染器也可能有 bug。原型若需给客户演示或嵌入低版本环境，不能只靠“主流浏览器 OK”就放心。
-
CSS.supports()是运行时检测手段，可在初始化时判断：if (!CSS.supports('color', 'var(--primary-color)')) { /* 加载降级 CSS 文件 */ } - 原型阶段可用 PostCSS 插件（如
postcss-custom-properties）做编译时变量展开，生成带 fallback 的静态值，但注意会失去运行时动态换色能力 - 别依赖
!important强行覆盖变量——它无法 overridevar()的计算结果，只会让调试更混乱
替换变量后按钮没变色？先查 computed styles 里 var(--primary-color) 是否解析成了有效值
DevTools 的 Styles 面板显示的是原始声明，容易误判；真正要看的是 Elements → Computed → color / background-color 这一行——如果这里显示 var(--primary-color) 本身，说明变量未被识别或拼写错误；如果显示 inherit 或 transparent，说明 fallback 未生效或上级重置了值。
立即学习“前端免费学习笔记（深入）”；
- 常见拼写错误：
--primay-color（少个 r）、--Primary-color（大小写敏感） - 变量名中不能含空格、特殊符号，仅支持字母、数字、连字符和下划线
- 动态改变量要用
document.documentElement.style.setProperty('--primary-color', '#28a745')，直接改style.cssText会覆盖其他变量
原型里变量替换快，但快的前提是变量用得干净、范围控得准、fallback 留得稳。最容易忽略的其实是组件内部对变量的“二次覆盖”——一个 card 组件自己设了 --primary-color，结果整个页面换色时它岿然不动。
