前言

说起换肤功能，前端应该是非常熟悉了?一般来说换肤的需求分为几种：

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://www.fly63.com/article/detial/4292