CSS变量管理主题色是最灵活易维护的方案，通过语义化命名（如--color-primary）、全局定义、组件引用、多主题切换（class或JS控制）、fallback默认值及局部重写实现高效主题管理。
用 CSS 变量（Custom Properties）管理主题色，是目前最灵活、最易维护的方案。它把颜色值从分散的样式规则中抽离出来，集中定义、统一更新，改一处，全站响应。
把主题色提取到 :root 中
在全局样式顶层（比如 :root 或 html 选择器）定义语义化变量，避免用 --red-500 这类纯数值命名，改用功能型名称：
-
--color-primary: #4a6fa5;（主色调，用于按钮、链接等） -
--color-surface: #ffffff;（背景/卡片底色） -
--color-text: #333333;（正文文字） -
--color-border: #e0e0e0;（边框）
组件内只用变量，不写死颜色
所有组件样式直接引用变量，不硬编码十六进制值。这样即使换主题，也无需翻找每个 button { background: #4a6fa5; } 去修改：
.btn {
background-color: var(--color-primary);
color: var(--color-surface);
}
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
}
支持多主题切换，只需切换变量值
深色模式、企业定制主题等，只需动态切换 :root 下的变量值。可用 JS 切换 class，或直接设置 style：
立即学习“前端免费学习笔记（深入）”；
- HTML 中加
- CSS 中写：
.theme-dark { --color-surface: #1e1e1e; --color-text: #f0f0f0; --color-border: #333; } - JS 切换：
document.documentElement.classList.toggle('theme-dark')
配合 fallback 和作用域提升健壮性
变量可设默认值防未定义，也可在局部作用域重写，适配特殊场景：
-
color: var(--color-text, #333);—— 没定义时回退为#333 - 在模态框内部重定义：
.modal { --color-surface: #fff9c4; }，其子元素自动继承新值
--c1；上线前用浏览器 DevTools 的“Computed”面板检查变量是否生效，比肉眼扫代码更可靠。 
