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

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

编程文章jaq1232025-03-03 10:58:4938A+A-

本文为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也提供了一个组件来帮我们做这件事,接下来看看这个组件是怎么实现的。

组件式调用

组件式调用可以有范围性的定制组件样式,避免全局污染,使用示例:



StyleProvider组件源码如下:

实现很简单,就是创建一个div元素来包裹组件,然后将css变量设置到该div上,这样这些css变量只会影响它的子孙元素。

函数式调用

除了使用组件,也可以通过函数的方式使用,但是只能全局更新样式:



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内置提供了暗黑模式的支持,使用方式为:



也调用了前面的StyleProvider方法,所以实现原理也是通过css变量,其实就是内置了一套暗黑模式的css变量:

总结

可以发现使用css变量来实现主题定制和暗黑模式是非常简单的,兼容性也非常好,各位如果有涉及到换肤的需求都可以优先考虑使用。

点击这里复制本文地址 以上内容由jaq123整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

苍茫编程网 © All Rights Reserved.  蜀ICP备2024111239号-21