CSS变量实战：动态主题切换技巧

在现代前端开发中，CSS变量（--var）是实现动态样式的核心工具。本文将分享如何用其高效实现主题切换：

1. 全局变量声明

在 :root 中定义基础变量：

:root {
   
  --primary-color: #3498db;
  --bg-color: #f8f9fa;
  --text-color: #333;
}

2. 动态切换主题

通过 JavaScript 修改根变量：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--bg-color', '#2c3e50');

3. 组件级复用

局部组件可继承/覆盖变量：

.card {
   
  background: var(--bg-color);
  border: 2px solid var(--primary-color);
}

4. 媒体查询联动

配合暗色模式自动适配：

@media (prefers-color-scheme: dark) {
   
  :root {
   
    --bg-color: #1a1a1a;
    --text-color: #eee;
  }
}

优势总结：
✅ 减少重复代码
✅ 提升可维护性
✅ 无需预处理器编译
✅ 实时动态响应

TIP：搭配 calc() 可实现动态间距/尺寸计算，如：padding: calc(var(--base-padding) * 2);