应使用 CSS 自定义属性（如 --color-primary）统一管理主题色，定义在 :root 中，配合语义化原子类名（如 bg-primary）和三层命名结构（语义+层级+用途），确保可维护性与一致性。
怎么用 CSS 自定义属性管理主题色
直接把颜色值写死在选择器里，改个主色就得全局搜索替换，还容易漏。用 --primary 这类自定义属性（CSS Custom Properties）才是正解——它支持级联、可被 JavaScript 动态修改、能配合 :root 统一维护。
- 所有基础色必须定义在
:root里，比如--color-blue-500: #3b82f6;，别分散在组件中 - 避免直接用
rgb(59, 130, 246)这类硬编码值，哪怕只用一次，也先挂到变量上 - 深色模式切换时，只需重写
:root[data-theme="dark"]下的变量，不用动任何选择器 - 注意：IE 不支持自定义属性，如果还要兼容，得用 PostCSS 插件降级或另配一套 class 方案
为什么原子类名要带语义层级，比如 bg-primary 而不是 bg-blue-500
类名暴露具体色值（如 bg-blue-500）等于把设计决策锁死在 HTML 结构里。哪天 UI 把主色从蓝改成紫，你得改模板、改文档、改设计系统同步说明——而 bg-primary 只需改一处变量值，全站自动响应。
-
text-primary表示“主要文字色”，不指定是蓝是紫；border-divider表示“分隔线”，不指定是灰#e5e7eb还是#9ca3af - 禁止出现
bg-brand-blue这种带品牌名的类——品牌色可能变，但“主色”角色不会变 - 原子类只负责单一职责：背景、文字、边框、阴影……别搞
card-primary-blue这种组合类
如何组织色彩变量结构，避免 --color-1 --color-2 这种命名灾难
靠数字或模糊前缀（如 --main-color）撑不了三个月。必须按语义 + 层级 + 用途三层来分。
- 第一层是语义角色：
--color-primary、--color-success、--color-warning、--color-background、--color-surface - 第二层是明暗梯度（可选）：
--color-primary-50、--color-primary-100…--color-primary-900，对应设计系统中的色阶 - 第三层是用途限定（仅必要时）：
--color-primary-contrast（用于和 primary 搭配的反色文字），而不是--color-white - 别为每个组件单独开一套色变量，比如
--header-bg或--button-border——它们应该复用--color-surface或--color-divider
哪些地方最容易漏掉色彩一致性校验
最常出问题的不是主色，而是那些“看起来差不多”的灰色系、禁用态、边框、阴影——它们往往被随手写成 #ccc 或 rgba(0,0,0,0.1)，游离在原子体系之外。
立即学习“前端免费学习笔记（深入）”；
- 检查所有
border声明：是否用了--color-divider？有没有漏掉outline或box-shadow的颜色 - 禁用态（
disabled）按钮的文字、背景、边框，三者必须来自同一组灰阶变量，比如--color-gray-400，不能一个用#999一个用gray(200) - SVG 内联颜色（
fill="#6b7280"）最容易被忽略——要么统一用currentColor，要么提取成--color-icon-muted - 伪元素（
::placeholder、::selection）的颜色也得走变量，否则换主题时会掉队
