CSS变量统一管理主题色最灵活易维护：1.在:root定义语义化颜色变量；2.组件中仅用var()引用；3.通过body类切换多主题；4.可用color-mix()等函数生成衍生色。
用 CSS 变量（Custom Properties）统一管理主题色，是最灵活、最易维护的方式。把所有颜色定义在 :root 里，组件中只引用变量名，换主题时只需改变量值，无需动样式逻辑。
1. 在 :root 中集中定义主题色变量
把主色、辅色、文字色、背景色等抽象为语义化变量名，而不是直接写 #4a90e2 这类具体值：
:root {
--color-primary: #4a90e2;
--color-primary-hover: #357abd;
--color-secondary: #f5f5f5;
--color-text: #333;
--color-text-secondary: #666;
--color-border: #ddd;
--color-success: #4caf50;
--color-warning: #ff9800;
--color-error: #f44336;
}变量名建议带语义（如 --color-primary），避免用 --blue-500 这类纯描述性命名——它隐藏了用途，后期换色系时容易误用。
2. 组件样式中只使用变量，不写死颜色值
所有用到颜色的地方，统一用 var(--xxx) 引用：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: var(--color-primary);
color: white;
border: 1px solid var(--color-primary-hover);
}
.btn:hover {
background-color: var(--color-primary-hover);
}
.card {
background-color: var(--color-secondary);
color: var(--color-text);
border: 1px solid var(--color-border);
}
这样，即使未来要从蓝色主题切换到绿色主题，只要覆盖 :root 中的变量即可，所有组件自动响应。
3. 支持多主题切换：用 class 控制不同变量集
给 html 或 body 添加主题 class，配合 :root 的不同作用域定义：
:root {
--color-primary: #4a90e2;
--color-secondary: #f5f5f5;
}
body.theme-green {
--color-primary: #4caf50;
--color-secondary: #f1f8e9;
}
body.theme-dark {
--color-primary: #90caf9;
--color-secondary: #212121;
--color-text: #fff;
--color-border: #424242;
}
- JS 切换主题只需 document.body.className = 'theme-dark'
- 变量会按 CSS 优先级自然覆盖（body 上的声明比 :root 更具体）
- 支持 localStorage 记住用户偏好，刷新后保持主题
4. 配合 calc() 和 color-mix() 做衍生色（可选进阶）
减少变量数量，用 CSS 函数动态生成浅色/深色版本：
:root {
--color-primary: #4a90e2;
--color-primary-light: color-mix(in srgb, var(--color-primary) 70%, white 30%);
--color-primary-dark: color-mix(in srgb, var(--color-primary) 70%, black 30%);
/* 或用 opacity 模拟（兼容性更好） */
--color-primary-10: rgba(74, 144, 226, 0.1);
}注意：color-mix() 目前仅 Chrome 111+ 支持，生产环境建议搭配 PostCSS 插件或用 Sass 预处理生成固定值作为 fallback。
