天天看点

动态替换SCSS主题色配置

之前做切换主题色的时候采用的方法是:

先写好scss主题颜色配置

动态替换SCSS主题色配置

在页面中设置data-theme的值暗色或亮色

动态替换SCSS主题色配置

根据设置的data-theme值选用某个主题下的颜色:

动态替换SCSS主题色配置

使用的过程就不多说了,上面这种方法在不需要动态替换某一个颜色的时候没有什么问题。

后来遇到一个需求,主题色也就是primary需要在后台配置。当时我想scss是打包的时候就编译成了css了,不可以动态改primary的值。于是用了下面这个方法:

动态替换SCSS主题色配置

先通过接口查到后台配置的主题色的值,若存在则通过html写入几个类在用到主题色的地方添加这几个类。由于这个项目的页面比较少又都是原生h5写的所以将就了一下这个方法。后续在另一个项目做相同的需求时发现了4个问题。

1. 若使用的地方比较多,需要在每个使用的地方额外添加类目非常繁琐。

2. 动态定义一个主题色以上就非常复杂。

3. 若不止主题色,还配置其他颜色复杂度呈指数上升。

4. 引入的组件库不能很好的改造适配主题模式。

可见这个方法只是权宜之计,问题很多。后面突然想到一个较好好的解决办法:

先在根样式下写定义两个默认的主题颜色

动态替换SCSS主题色配置

在scss样式配置中使用这两个颜色

动态替换SCSS主题色配置

 在查询需要改动的颜色后动态更改根样式下的主题颜色

动态替换SCSS主题色配置

 这样就完成了动态更改scss主题色的配置。这个方法可以兼容原来的方法,并且只要在一开始写一次,不需要一直加class,怎么看怎么都比之前舒服。之前问题的关键是突然忘了css支持var()方法以及scss的一些特性。