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 变量，即时预览效果——这是最快的手动测试方式。