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;
  }

  ，其子元素自动继承新值