应在 :root 中定义 --primary-color 和 --secondary-color 等语义化变量，优先用十六进制；通过 @media (prefers-color-scheme: dark) 或 [data-theme] 覆盖实现主题切换；避免行内 style 覆盖，统一用 CSS 变量管理边框、阴影、SVG、伪元素等所有颜色场景。
怎么在根元素定义 CSS 主色和辅色变量
直接在 :root 里声明 --primary-color 和 --secondary-color，这是最顶层、全局可访问的入口。别写在某个 class 或组件内部，否则子元素用 var(--primary-color) 会拿不到。
常见错误是把变量塞进 body 或某个 wrapper，结果在 @media 查询或伪元素里引用失败——:root 才是唯一可靠的锚点。
- 推荐写法：
:root { --primary-color: #4a6fa5; --secondary-color: #6c757d; } - 避免用
rgb()或hsl()字符串直接赋值，后期想动态改亮度/透明度会卡住；优先用十六进制或命名色（如rebeccapurple） - 如果项目要支持暗色模式，现在就该把变量名设计成语义化而非视觉化，比如用
--color-brand替代--primary-blue，后续换主题时不用改 HTML 结构
如何让 CSS 变量响应主题切换（比如深色/浅色）
靠 @media (prefers-color-scheme: dark) 覆盖 :root 变量是最轻量的做法，不需要 JS 注入或重写样式表。但注意：这个媒体查询只监听系统级偏好，不等于“手动切换主题”——后者得靠 class 切换 + 变量重定义。
- 系统偏好方案：
@media (prefers-color-scheme: dark) { :root { --primary-color: #3a5a80; --secondary-color: #adb5bd; } } - 手动切换方案：给
html加data-theme="dark"，再写html[data-theme="dark"] { --primary-color: #3a5a80; } - 别在
@media里重复声明整个:root，只覆盖需要变的变量；否则容易漏掉新增变量，维护成本陡增
为什么不能直接在组件里用 style="--primary-color: red" 覆盖变量
行内 style 的优先级确实高于 :root，但这样干等于放弃变量管理的意义——你失去了集中控制、批量替换、主题联动的能力。更现实的问题是：一旦多个组件各自硬编码颜色，后面想统一调亮 10%，就得 grep 全项目改 27 处 style 属性。
立即学习“前端免费学习笔记（深入）”；
- 真正需要局部覆盖时，用 class 控制更可控：
.card--urgent { --primary-color: #dc3545; } - 如果必须动态，用 JS 设置
document.documentElement.style.setProperty('--primary-color', '#dc3545')，而不是往每个元素塞 style - 警惕 React/Vue 组件中用
:style="{ '--primary-color': color }"—— 这会让变量作用域锁死在该组件，子组件拿不到新值，除非显式传递 props 或用 CSS-in-JS 方案
哪些地方容易漏掉变量使用，导致颜色不一致
边框、阴影、disabled 状态、SVG fill/stroke、伪元素 ::placeholder、input[type="range] 的轨道色……这些地方最容易写死颜色值，绕过变量体系。
- 检查所有
border: 1px solid #6c757d，替换成border-color: var(--secondary-color) -
box-shadow: 0 2px 4px rgba(0,0,0,0.1)这类半透明黑影，建议抽成--shadow-color: rgba(var(--color-black-rgb), 0.1)，并提前定义--color-black-rgb: 0, 0, 0，方便后续改 alpha 或换基色 - SVG 图标内联时，
fill写currentcolor比写var(--primary-color)更稳妥，能自动跟随父级文字色，减少变量依赖层级
::selection 或一个 progress::-webkit-progress-value，整套体系就出现裂痕。 
