使用CSS变量实现主题定制真的很简单

使用CSS变量自定义主题真的很简单ThemecustomizationVarlet通过css变量来组织样式。什么是css变量？其实很简单。首先声明一个自定义的css属性，这个属性可以声明在任意元素上，但是只有该元素的后代才能使用，所以如果要声明所有元素都可以全局使用，可以在根伪下设置-class::root{--main-bg-color:red;}如代码所示，需要css变量的自定义属性。需要从--开始。然后在任何需要使用这种样式的元素上通过var()函数调用它：div{background-color:var(--main-bg-color);}只需更改--main-bg-color的值attribute，所有使用这个样式变量的地方都会被更新，所以主题定制就靠这个了。Varlet组件的样式变量一般分为两种：基本型和组件本身。varlet-ui/src/styles/目录下定义了公共的基本样式变量：每个组件都会导入这个文件，比如Button组件：另外，每个组件也会有自己的变量，也比如Button组件:think修改默认值也很简单，直接覆盖即可。在运行时动态更新样式也可以直接修改根节点的样式变量。另外，Varlet还提供了一个组件来帮助我们做这件事。接下来我们看看这个组件是如何实现的。组件式调用组件式调用可以大范围自定义组件样式，避免全局污染。示例：StyleProvider组件源码如下：实现很简单，就是创建一个div元素包裹组件，然后给div设置css变量，这样这些css变量只会影响它后人除了使用组件，还可以通过函数调用函数，但只能全局更新样式：-primary':'#3f51b5'}consttoggleRootTheme=()=>{rootStyleVars=rootStyleVars?null:darkThemeStyleProvider(rootStyleVars)}StyleProvider函数是如下：constmountedVarKeys:string[]=[]functionStyleProvider(styleVars:StyleVars|null={}){//删除之前设置的css变量mountedVarKeys.forEach((key)=>document.documentElement.style.removeProperty(key))mountedVarKeys.length=0//将css变量设置为根元素并将其添加到mountedVarKeys数组conststyles:StyleVars=formatStyleVars(styleVars)Object.entries(styles).forEach(([key,value])=>{document.documentElement.style.setProperty(key,value)mountedVarKeys.push(key)})}实现起来也很简单单一的，直接给html节点设置css变量，同时添加到一个数组中，用于删除深色模式。Varlet为暗模式提供内置支持。使用方法是：也调用了前面的StyleProvider方法，所以实现原理同样是通过css变量，其实内置了一套深色模式的css变量：综上所述，我们可以发现使用css变量实现主题定制和深色模式非常简单，兼容性也非常好好的。如果你有换肤相关的需求，可以优先使用。