前言
说起换肤功能，前端应该是非常熟悉了??
一般来说换肤的需求分为几种：
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
原文地址：https://www.cnblogs.com/leiting/p/11203383.html