使用 css/less 动态更换主题色（换肤功能）

标签：方法   浏览器   element   适合   sage   切换   方式   两种方法   改变   

前言

说起换肤功能，前端应该是非常熟悉了??

一般来说换肤的需求分为几种：

1. 纯前端，直接在页面前端通过点击自由切换限定的几种主题色，切换之后主题色变量存到本地浏览器

2. 在后台配置好色值，传到前端，前端从接口获取主题色在初始化的时候显示对应的主题色

3. 前面两者的结合，初始化的颜色设置，但也可通过前端的切换来更改主题色

拿到换肤需求后，就在思考该如何实现呢??

先搜一下，看下有哪些方法

Ant Design 的更换主题色功能是用 less 提供的 modifyVars 的方式进行覆盖变量来实现，是基于 less 在浏览器中的编译来实现，

在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量

Element-UI 有换肤功能 https://elementui.github.io/theme-preview/#/zh-CN

实现原理：https://github.com/ElemeFE/element/issues/3054 

如果是有限的几种颜色切换，可以：

1. 在最外层加主题类名，定义几种主题色，通过切换类来切换主题色 or

2. 将不同主题的样式抽取出来生成多份主题样式文件，在切换事件的时候动态引入

这两种方法的缺点都是要维护几种样式文件，对开发者不友好

由于是要实现动态换肤，自定义色值，所以上面的几种方式就不适合了。

起初想用less的 modifyVars方法

less.modifyVars({
  ‘@themeColor‘: ‘blue‘
});

 但less是预编译的，在加载的时候已经编译成css了，再要去改的话，是不行的，除非在编译之前修改和定义颜色。

ant的实现是通过less，不过是有限制的，less需要用link方式引入，是基于 less 在浏览器中的编译来实现。

最终使用了css变量来进行主题色的修改，替换主题色变量，然后用setProperty来进行动态修改

用法很简单就是给变量加--前缀

例如主题色：

body{
   --themeColor:#000;
}

使用：

.main{
   color: var(--themeColor);
}

要修改主题色的话：

document.body.style.setProperty(‘--themeColor‘, this.theme_color);

最后，这些方法来看，使用哪种可根据需求来灵活决定实现方式。

参考： https://juejin.im/post/5ca41617f265da3092006155

使用 css/less 动态更换主题色（换肤功能）

标签：方法   浏览器   element   适合   sage   切换   方式   两种方法   改变   

原文地址：https://www.cnblogs.com/leiting/p/11203383.html