功能 - themeColor主题色(换肤) - 《el-technology》

参考：
Ant Design
Element-UI
内联样式
你不知道的css中的expression">你不知道的css中的expression
使用 css/less 动态更换主题色（换肤功能）

参考：

原文：https://blog.csdn.net/weixin_30872671/article/details/98286899?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
Ant Design 的更换主题色功能是用 less 提供的 modifyVars 的方式进行覆盖变量来实现。
Element-UI 有换肤功能 https://elementui.github.io/theme-preview/#/zh-CN
实现原理：https://github.com/ElemeFE/element/issues/3054

Ant Design

less的 modifyVars方法
modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量
less.modifyVars({
‘@themeColor’: ‘blue’
});

link方式引入主题色文件

更改主题色事件
// color 传入颜色值
handleColorChange (color) {
const changeColor = () => {
var less = require(‘less’);
less.modifyVars({ // 调用 less.modifyVars 方法来改变变量值’
@themeColor’:color
})
.then(() => {
console.log(‘修改成功’);
});
};
const lessUrl =
‘https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js‘;

  if (this.lessLoaded) {<br />          changeColor();<br />      } else {<br />          less = {<br />              async: true,<br />          };
      axios.get(lessUrl).then(() => {<br />              this.lessLoaded = true;<br />              changeColor();<br />          });<br />      }<br />  };

Element-UI

项目仓库在这：https://github.com/ElementUI/theme-preview
实现其实很暴力：

先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
直接在页面上加 style 标签，把生成的样式填进去：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211

内联样式

:style=”{backgroundColor: !!isActive ? themeStyle : ‘#999’}”
themeStyle: this.$store.state.common.themeStyle, // 主题色-按钮颜色

你不知道的css中的expression

原文：https://www.cnblogs.com/hsprout/p/5041241.html
eg：color:expression(this.$store.state.common.themeStyle);
注意:
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
性能优化：
一个减少CSS Expression计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS Expression。
但CSS Expression还是有很多问题，所以尽量不要使用。

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

原文：

方法：使用css变量，给变量加--前缀，涉及到主题色的都改成var(--mainColor)这种方式
示例：

body{
    --mainColor:red;
}
.demo{
    color:var(--mainColor);
}

可以通过js修改主题色

document.body.style.setProperty('--mainColor', '#fff');