CSS 色彩变量：构建可扩展的设计 Token 系统

基础语法

CSS 自定义属性以双横线前缀定义，通过 var() 使用。它们像任何 CSS 属性一样层叠，并在 JavaScript 修改时实时更新：

:root {
  --color-brand: #4f6ef7;
  --color-text:  #1a1a1a;
  --color-bg:    #ffffff;
}

button {
  background: var(--color-brand);
  color: var(--color-text);
}

三层 Token 体系

原始十六进制值是基础层。语义化 Token 是让系统可维护的关键：

• 基础 Token — 实际颜色值：--blue-500: #3b82f6
• 语义 Token — 角色映射：--color-action: var(--blue-500)
• 组件 Token — 具体用途：--button-bg: var(--color-action)

这三层结构让你只需重新赋值语义 Token，就能切换整套主题，而无需修改任何组件。

用 CSS 变量实现深色模式

:root {
  --bg:   #ffffff;
  --text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #111111;
    --text: #f5f5f5;
  }
}

或使用 data-theme 属性实现用户手动切换：

[data-theme="dark"] { --bg: #111; --text: #f5f5f5; }

命名规范

统一命名能防止团队协作混淆。常见模式：

• --color-[角色]-[变体] — 如 --color-surface-raised
• --[组件]-[属性] — 如 --button-border-radius
• 基于色阶：--gray-100 到 --gray-900

备用值

var() 接受可选备用值：var(--color-brand, #4f6ef7)。在组件库中使用，确保即使消费方项目未定义所有 Token，组件也能正常工作。

导出工作流

在设计工具中定义色板 → 导出为 CSS 变量文件 → 将该文件作为唯一事实来源。React、Vue、Svelte 或纯 HTML，所有平台消费同一份 Token 文件。