CSS变量实现配色方案实时切换最灵活可维护，核心是将颜色定义为语义化变量（如--color-primary），通过JS动态修改:root下的值，所有引用自动更新，支持预设主题、localStorage持久化及开发者工具即时调试。
用 CSS 变量（Custom Properties）实现配色方案的实时切换，是目前最灵活、可维护性最强的方式。核心思路是：把颜色定义为变量，通过 JS 动态修改 :root 下的变量值，所有引用该变量的样式会自动更新，无需重写类名或刷新页面。
1. 基础结构：用 :root 定义主题色变量
在全局样式顶层（通常在 :root 伪类中）集中声明颜色变量，命名建议语义化（如 --color-primary），而非仅用 --blue-500 这类描述性名称，便于后期主题扩展：
:root {
--color-primary: #4f46e5;
--color-secondary: #6b7280;
--color-success: #10b981;
--color-bg: #ffffff;
--color-surface: #f9fafb;
--color-text: #1f2937;
}
然后在组件中直接使用：
.btn {
background-color: var(--color-primary);
color: var(--color-bg);
}
2. 快速切换：JS 动态修改变量值
只需一行 JS 即可切换主题色，适合按钮点击、下拉选择等交互：
立即学习“前端免费学习笔记（深入）”；
- 获取 document.documentElement（即 :root 元素）
- 调用
style.setProperty()更新变量 - 支持链式设置多个变量，一次生效
const root = document.documentElement;
// 切换为深色模式基础色
root.style.setProperty('--color-bg', '#111827');
root.style.setProperty('--color-surface', '#1f2937');
root.style.setProperty('--color-text', '#f9fafb');
3. 预设主题一键切换（推荐）
把整套配色封装成对象，配合下拉菜单或 toggle 按钮快速应用：
const themes = {
light: {
'--color-bg': '#ffffff',
'--color-surface': '#f9fafb',
'--color-text': '#1f2937',
},
dark: {
'--color-bg': '#111827',
'--color-surface': '#1f2937',
'--color-text': '#f9fafb',
},
blue: {
'--color-primary': '#3b82f6',
'--color-bg': '#eff6ff',
}
};
function applyTheme(themeName) {
const theme = themes[themeName];
const root = document.documentElement;
Object.entries(theme).forEach(([prop, value]) => {
root.style.setProperty(prop, value);
});
}
// 使用示例
document.getElementById('theme-select').addEventListener('change', (e) => {
applyTheme(e.target.value);
});
4. 配合 localStorage 持久化用户偏好
避免每次刷新丢失设置，可在切换时存入 localStorage，并在页面加载时读取应用：
- 设置时：
localStorage.setItem('ui-theme', 'dark') - 初始化时：读取并调用
applyTheme() - 注意兜底逻辑——若 localStorage 为空或无效，回退到默认主题
// 页面加载时应用保存的主题
window.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('ui-theme');
if (saved && themes[saved]) {
applyTheme(saved);
} else {
applyTheme('light'); // 默认
}
});
// 切换时同步存储
function setTheme(name) {
applyTheme(name);
localStorage.setItem('ui-theme', name);
}
不复杂但容易忽略：CSS 变量具有继承性和层叠性，确保修改的是 :root 层级；避免在内联 style 中重复定义同名变量覆盖主题；开发时可用浏览器开发者工具的“Styles”面板直接编辑 :root 变量，即时预览效果——这是最快的手动测试方式。
