CSS 颜色变量怎么用 - 主题与深色模式实践

🌟 为什么用颜色变量#

把颜色写死在每个样式里，改主题时要全局搜索替换，还容易漏。CSS 变量（自定义属性） 把颜色集中管理，一处修改、全局生效，深色模式切换也变得简单。星点设计辅助可导出变量。

🧱 基本用法#

1
:root {
2
  --color-primary: #409eff;
3
  --color-text: #1f2937;
4
  --color-bg: #ffffff;
5
  --color-border: #e5e7eb;
6
}
7

8
.button {
9
  background: var(--color-primary);
10
  color: var(--color-bg);
11
}

• 在 :root 定义，全局可用；
• 用 var(--name) 引用；
• 可提供回退值：var(--color-primary, #409eff)。

🌙 深色模式#

用变量覆盖即可实现主题切换：

1
:root {
2
  --color-bg: #ffffff;
3
  --color-text: #1f2937;
4
}
5

6
html.dark {
7
  --color-bg: #0f172a;
8
  --color-text: #e2e8f0;
9
}

组件里只引用 var(--color-bg)，切换 html.dark 类就整体换肤，无需改组件样式。

配合系统偏好：

1
@media (prefers-color-scheme: dark) {
2
  :root { --color-bg: #0f172a; }
3
}

🏷 命名建议（Design Token）#

推荐语义命名：组件引用语义变量，换品牌色时只改语义层。

🎨 深色模式配色要点#

• 背景用深灰而非纯黑；
• 文字用浅灰而非纯白；
• 主色降低亮度/饱和度；
• 保证对比度 ≥ 4.5:1（对比度检测）。

💡 从工具导出变量#

在设计辅助里选好主色与语义色，可直接导出 :root { --color-*: ... }，复制进项目即可。

🔧 常见问题#

💬 总结#

CSS 颜色变量让主题管理从”散落各处”变成”集中可控”。定义语义变量、用 html.dark 覆盖、组件只引用变量，深色模式与换肤都很轻松。变量值可用设计辅助一键导出。

立即体验：访问 设计辅助