使用CSS变量实现主题定制真的很简单
本文为Varlet组件库源码主题阅读系列第六篇，
Varlet支持自定义主题及暗黑模式，本篇文章我们来详细看一下这两者的实现。
主题定制
Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以如果要声明全局所有元素都能使用的话，可以设置到根伪类:root下：
:root {
--main-bg-color: red;
}
如代码所示，css变量的自定义属性是有要求的，需要以--开头。
然后在任何需要使用该样式的元素上通过var()函数调用即可：
div {
background-color: var(--main-bg-color);
}
只要更改了--main-bg-color属性的值，所有使用该样式变量的地方都会更新，所以主题定制靠的就是这个。
Varlet组件的样式变量总体分为两种：基本的、组件自身的。
公共的基本样式变量定义在varlet-ui/src/styles/目录下：
每个组件都会引入这个文件，比如Button组件：
除此之外每个组件也会有自身的变量，同样比如Button组件：
想要修改默认的值也很简单，直接覆盖即可。运行时动态更新样式也可以直接修改根节点的样式变量，此外Varlet也提供了一个组件来帮我们做这件事，接下来看看这个组件是怎么实现的。
组件式调用
组件式调用可以有范围性的定制组件样式，避免全局污染，使用示例：
<script setup>
import { ref, reactive } from 'vue'
const state = reactive({
score: 5,
})
const styleVars = ref({
'--rate-primary-color': 'var(--color-success)',
})
</script>
<template>
<var-style-provider :style-vars="styleVars">
<var-rate v-model="state.score" />
</var-style-provider>
</template>
StyleProvider组件源码如下：
<script lang="ts">
import { defineComponent, h } from 'vue'
import { formatStyleVars } from '../utils/elements'
import { call, createNamespace } from '../utils/components'
const { n } = createNamespace('style-provider')
export default defineComponent({
name: 'VarStyleProvider',
props: {
styleVars: {
type: Object,
default: () => ({}),
},
},
setup(props, { slots }) {
return () =>
h(
'div',
{
class: n(),
style: formatStyleVars(props.styleVars),
},
call(slots.default)
)
},
})
</script>
实现很简单，就是创建一个div元素来包裹组件，然后将css变量设置到该div上，这样这些css变量只会影响它的子孙元素。
函数式调用
除了使用组件，也可以通过函数的方式使用，但是只能全局更新样式：
<script setup>
import { StyleProvider } from '@varlet/ui'
let rootStyleVars = null
const darkTheme = {
'--color-primary': '#3f51b5'
}
const toggleRootTheme = () => {
rootStyleVars = rootStyleVars ? null : darkTheme
StyleProvider(rootStyleVars)
}
</script>
<template>
<var-button type="primary" block @click="toggleRootTheme">切换根节点样式变量</var-button>
</template>
StyleProvider函数如下：
const mountedVarKeys: string[] = []
function StyleProvider(styleVars: StyleVars | null = {}) {
// 删除之前设置的css变量
mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
mountedVarKeys.length = 0
// 将css变量设置到根元素上，并且添加到mountedVarKeys数组
const styles: StyleVars = formatStyleVars(styleVars)
Object.entries(styles).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value)
mountedVarKeys.push(key)
})
}
实现也非常简单，直接将css变量设置到html节点上，同时会添加到一个数组里，用于删除操作。
暗黑模式
Varlet内置提供了暗黑模式的支持，使用方式为：
<script setup>
import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'
let currentTheme = null
const toggleTheme = () => {
currentTheme = currentTheme ? null : dark
StyleProvider(currentTheme)
}
</script>
<template>
<var-button block @click="toggleTheme">切换主题</var-button>
</template>
也调用了前面的StyleProvider方法，所以实现原理也是通过css变量，其实就是内置了一套暗黑模式的css变量：
总结
可以发现使用css变量来实现主题定制和暗黑模式是非常简单的，兼容性也非常好，各位如果有涉及到换肤的需求都可以优先考虑使用。
