关于css3:css变量实现动态改变主题色

最近思考了一下如何实现网站主题色彩切换，解决方案就是应用 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。

文章首发于我的博客 -《css 变量实现动静扭转主题色》