最近思考了一下如何实现网站主题颜色切换，解决方案就是使用css变量。如今网站开发过程中css变量被使用到的频率越来越高，而且 Element plus 也是用 css 变量来重构了几乎所有组件的样式系统。CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。
这篇文章就来说一下css变量的使用方式。
全局作用域下的css变量
通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：
:root {
--main-bg-color: brown;
}
<!-- 在需要的元素中使用 -->
element {
background-color: var(--main-bg-color);
}
这样定义一系列的变量后，就意味着可以动态修改它们。下面是通过 js 控制 css 变量，可以这样做：
// 获取全局 css 变量
getComputedStyle(document.documentElement).getPropertyValue(`--main-bg-color`)
// 设置 css 变量
document.documentElement.style.setProperty('--main-bg-color', 'red')
局部使用css变量
.div200 {
--main-bg-color: #000;
height: 100px;
background-color: var(--main-bg-color);
margin-top: 20px;
}
如果您想要通过 js 控制某个元素的 css 变量，可以这样做：
// 获取某个标签上的css变量
getComputedStyle(document.querySelector('.div200')).getPropertyValue('--main-bg-color')
// 设置 css 变量
document.querySelector('.div200').style.setProperty('--main-bg-color', '#fff')
具备了这些条件，动态切换网站主题大概就是这样的思路。
如果你使用的是vue3技术栈，还有更加优雅的方式来操纵css变量，useCssVar | VueUse。