通过CSS变量（自定义属性），我们可以轻松实现网站的动态主题切换，提升用户体验和界面的灵活性。
一、CSS变量基础
CSS变量使用--前缀声明，通过var()函数调用：
:root {--primary-color: #3498db;--secondary-color: #2ecc71;--font-size: 16px;
}.button {background-color: var(--primary-color);font-size: var(--font-size);
}
变量具有作用域，可在全局或局部定义：
/* 全局变量 */
:root {--global-var: 10px;
}/* 局部变量 */
.component {--local-var: 20px;margin: var(--local-var);
}
二、实现动态主题切换
方法1：类名切换主题
定义多套主题变量，通过切换类名改变主题：
/* 默认亮色主题 */
:root {--bg-color: #ffffff;--text-color: #333333;--primary: #409eff;
}/* 暗色主题 */
:root.dark {--bg-color: #1a1a1a;--text-color: #ffffff;--primary: #79bbff;
}body {background-color: var(--bg-color);color: var(--text-color);transition: all 0.3s ease;
}
通过JavaScript切换主题：
const toggleBtn = document.getElementById('themeToggle');toggleBtn.addEventListener('click', () => {document.documentElement.classList.toggle('dark');// 保存用户偏好const isDark = document.documentElement.classList.contains('dark');localStorage.setItem('theme', isDark ? 'dark' : 'light');
});// 初始化时读取保存的主题
if (localStorage.getItem('theme') === 'dark') {document.documentElement.classList.add('dark');
}
方法2：属性切换主题
使用数据属性而非类名管理主题：
/* 默认主题 */
:root {--primary-color: #3498db;--bg-color: #ffffff;
}/* 暗色主题 */
:root[data-theme="dark"] {--primary-color: #2c3e50;--bg-color: #1f1f1f;
}/* 红色主题 */
:root[data-theme="red"] {--primary-color: #e74c3c;--bg-color: #fbeeee;
}
JavaScript控制：
function setTheme(theme) {document.documentElement.setAttribute('data-theme', theme);localStorage.setItem('theme', theme);
}// 切换主题
setTheme('dark');
三、实战案例
案例1：动态按钮系统
创建可定制的按钮组件：
:root {--btn-padding: 12px 24px;--btn-radius: 4px;--btn-primary: #4285f4;--btn-hover: #3367d6;
}.btn {padding: var(--btn-padding);border-radius: var(--btn-radius);background: var(--btn-primary);border: none;color: white;transition: background 0.3s;
}.btn:hover {background: var(--btn-hover);
}
案例2：实时样式编辑器
创建用户可自定义的界面：
<div class="controls"><label>主色: <input type="color" id="primaryColor"></label><label>字体大小: <input type="range" id="fontSize" min="12" max="24"></label><label>间距: <input type="range" id="spacing" min="8" max="24" step="4"></label>
</div>
document.getElementById('primaryColor').addEventListener('input', (e) => {document.documentElement.style.setProperty('--primary', e.target.value);
});document.getElementById('fontSize').addEventListener('input', (e) => {document.documentElement.style.setProperty('--base-font-size', `${e.target.value}px`);
});document.getElementById('spacing').addEventListener('input', (e) => {document.documentElement.style.setProperty('--spacing-unit', `${e.target.value}px`);
});
案例3：响应式间距系统
使用变量创建一致的间距系统：
:root {--spacing-unit: 8px;--spacing-1: var(--spacing-unit);--spacing-2: calc(var(--spacing-unit) * 2);--spacing-3: calc(var(--spacing-unit) * 3);--spacing-4: calc(var(--spacing-unit) * 4);
}.card {margin: var(--spacing-2);padding: var(--spacing-3);
}.section {padding: var(--spacing-4) var(--spacing-2);
}
四、高级技巧
1. 使用默认值和回退
.element {color: var(--undefined-var, #ff0000); /* 使用默认值 */font-size: var(--size, var(--base-size, 16px)); /* 嵌套默认值 */
}
2. 动态计算
:root {--base-size: 16px;--multiplier: 2;
}.title {font-size: calc(var(--base-size) * var(--multiplier));
}
3. 动画控制
:root {--rotate: 0deg;
}.spinner {transform: rotate(var(--rotate));transition: transform 0.3s ease;
}
// 通过JS动态修改
element.style.setProperty('--rotate', '360deg');
五、性能优化与兼容性
性能建议
- 避免过度使用：每个变量都会增加样式计算成本
- 合理作用域：将变量定义在最近的作用域
- 减少动态更新：批量修改而非频繁单次修改
兼容性处理
/* 基础样式（无变量） */
body {background: #fff;color: #333;
}/* 支持变量的增强样式 */
@supports (--css: vars) {body {background: var(--bg-color, #fff);color: var(--text-color, #333);}
}
对于不支持CSS变量的浏览器（如IE），可使用polyfill：
import cssVars from 'css-vars-ponyfill';
cssVars({// 配置选项
});
六、总结
CSS变量为实现动态主题提供了强大而灵活的解决方案。通过集中管理设计值、简化主题切换逻辑，显著提升了开发效率和维护性。
关键优势：
- ✅ 集中管理：设计系统值一目了然
- ✅ 动态更新：实时切换主题无需重载
- ✅ 代码简洁：减少重复样式代码
- ✅ 易于维护：修改主题只需调整变量值
开始使用CSS变量，为你的网站增添动态主题切换能力吧！
进一步探索：
- 使用CSS变量与CSS预处理器（如Sass）结合
- 探索CSS变量在动画和交互中的应用
- 尝试使用CSS变量实现全站设计系统
提示：本文示例需在现代浏览器中运行，如需支持旧版浏览器，请使用提供的兼容性方案。