CSS变量实现一键换肤，实战技巧与避坑指南

用CSS变量做主题切换，核心思路就是把那些会随主题变化的颜色、字号、间距等抽出来，在根元素上定义好，然后通过JavaScript动态改掉根元素的变量值。

CSS变量的好处是实时响应。你改一个变量，页面上所有用到它的地方都会跟着变，不需要像以前那样写一堆重复样式或者加载多套CSS文件。比如你要做深色模式，只需要把背景色、文字色这些变量重新赋值就行。

CSS变量到底怎么切换主题

实现逻辑其实很简单。先在:root里定义默认主题的变量，比如--bg-color: #fff; --text-color: #333。然后在.dark类或者[data-theme="dark"]里覆盖这些变量值，比如--bg-color: #1a1a2e; --text-color: #e0e0e0。

JavaScript那边就干一件事：点击按钮的时候，给html标签加一个类名或者换个属性值。比如document.documentElement.setAttribute('data-theme', 'dark')。样式表里已经写好了对应的变量覆盖规则，页面直接就切换过去了。

这里有个细节容易被忽略。如果主题变量里用到了var()嵌套，比如--border: var(--primary-color) 1px solid，切换的时候要保证所有依赖链上的变量都同时更新。否则会出现某个元素颜色变了但边框还卡在旧主题上。

实际落地要注意哪些坑

第一个坑是兼容性。虽然CSS变量在现代浏览器里支持得不错，但如果你要兼容IE11或者更老的设备，得准备降级方案。可以在声明变量后面写个固定值兜底，比如color: var(--text-color, #333)，旧浏览器不认识变量就会用后面的备选值。

第二个坑是动画过渡。主题切换如果直接改变量，颜色变化会非常生硬。解决方法是在<strong>选择器上加个transition，比如</strong> { transition: background-color 0.3s, color 0.3s }。但要注意不要对所有属性都加过渡，像width、height这些变动频繁的属性加上过渡反而会让页面卡顿。

第三个坑是第三方组件。有些第三方UI库的样式是内联写的或者用了!important，CSS变量覆盖不了。这时候得靠JavaScript直接改DOM元素的style属性，或者给组件包裹一层容器，在容器上重新定义变量作用域。

最后提一下性能。CSS变量不会触发重绘回流，因为浏览器把变量计算放到了样式解析阶段。你尽管放心用，即使页面上有成百上千个地方引用了同一个变量，切换主题时也只做一次变量赋值，浏览器会自动批量更新。