element-ui中主题，可以随意指定。
它其实是通过把前端选择的主题色，当做参数，然后发送给后端，然后让后端生成一个新的css文件，再发给前端。然后再通过js，将css设置到head中的style上，完成主题切换。
返回的css文件，不仅仅是简单的将颜色替换为我们刚才选择的那个主题色，还需要进行一些“颜色的计算”。例如：button在hover时，会在主题色上有个减淡的效果。也就是说，对于我们选择的任何颜色，都必须计算出一个减淡的颜色值，赋值给那些有hover的class。
使用color库，对主题色进行计算.将任意的主题色和“不同程度的白色”进行“混合”得到的。
如button的hover，正好是将主题色#8F13ED与0.2程度的白色(1就是完全白，0就是全黑)进行混合而得到。
let primaryColor = "#8F13ED";
Color(primaryColor)
.mix(Color("white"), 0.2)
.hex() //#A542F1
通过element-ui提供的皮肤下载功能，将模板主题文件下载下来，然后复制到js中。
import Color from "color";
//css模板
let cssString = ``;
let transferTheme = obj => {
//删除原来的
jquery(jquery("head")[0])
.find("[data-name='theme']")
?.remove();
let result = cssString;
/****************加载 font-face start*************/
let $style = jquery('<style data-name="theme" type="text/css"></style>');
let woff = require("@/configs/theme/theme-fonts/element-icons.woff");
let ttf = require("@/configs/theme/theme-fonts/element-icons.ttf");
result = result.replaceAll(
"font-face-src",
`url(${woff}) format("woff"), url(${ttf}) format("truetype")`
);
/****************加载 font-face end**************/
/****************加载 primary start*************/
let primaryColor = obj.primary || "#04407c";
result = result.replaceAll("--primary-color", primaryColor);
result = result.replaceAll(
"--primary-hover-color",
Color(primaryColor)
.mix(Color("white"), 0.9)
.hex()
);
result = result.replaceAll(
"--primary-hover-border-color",
Color(primaryColor)
.mix(Color("white"), 0.2)
.hex()
);
result = result.replaceAll(
"--primary-highlight-color",
Color(primaryColor)
.mix(Color("white"), 0.92)
.hex()
);
result = result.replaceAll(
"--primary-border-color",
Color(primaryColor)
.mix(Color("white"), 0.8)
.hex()
);
result = result.replaceAll(
"--primary-plain-border-color",
Color(primaryColor)
.mix(Color("white"), 0.6)
.hex()
);
result = result.replaceAll(
"--primary-disabled-color",
Color(primaryColor)
.mix(Color("white"), 0.5)
.hex()
);
result = result.replaceAll(
"--primary-plain-disabled-color",
Color(primaryColor)
.mix(Color("white"), 0.4)
.hex()
);
result = result.replaceAll(
"--primary-active-color",
Color(primaryColor)
.mix(Color("black"), 0.1)
.hex()
);
/****************加载 primary end*************/
/****************加载 success start*************/
let successColor = obj.success || "#63cb30";
result = result.replaceAll("--success-color", successColor);
result = result.replaceAll(
"--success-hover-color",
Color(successColor)
.mix(Color("white"), 0.9)
.hex()
);
result = result.replaceAll(
"--success-border-color",
Color(successColor)
.mix(Color("white"), 0.8)
.hex()
);
result = result.replaceAll(
"--success-hover-border-color",
Color(successColor)
.mix(Color("white"), 0.2)
.hex()
);
result = result.replaceAll(
"--success-plain-border-color",
Color(successColor)
.mix(Color("white"), 0.6)
.hex()
);
result = result.replaceAll(
"--success-disabled-color",
Color(successColor)
.mix(Color("white"), 0.5)
.hex()
);
result = result.replaceAll(
"--success-plain-disabled-color",
Color(successColor)
.mix(Color("white"), 0.4)
.hex()
);
result = result.replaceAll(
"--success-active-color",
Color(successColor)
.mix(Color("black"), 0.1)
.hex()
);
/****************加载 success end*************/
/****************加载 warning start*************/
let warningColor = obj.warning || "#e6a23c";
result = result.replaceAll("--warning-color", warningColor);
result = result.replaceAll(
"--warning-hover-color",
Color(warningColor)
.mix(Color("white"), 0.9)
.hex()
);
result = result.replaceAll(
"--warning-border-color",
Color(warningColor)
.mix(Color("white"), 0.8)
.hex()
);
result = result.replaceAll(
"--warning-hover-border-color",
Color(warningColor)
.mix(Color("white"), 0.2)
.hex()
);
result = result.replaceAll(
"--warning-plain-border-color",
Color(warningColor)
.mix(Color("white"), 0.6)
.hex()
);
result = result.replaceAll(
"--warning-disabled-color",
Color(warningColor)
.mix(Color("white"), 0.5)
.hex()
);
result = result.replaceAll(
"--warning-plain-disabled-color",
Color(warningColor)
.mix(Color("white"), 0.4)
.hex()
);
result = result.replaceAll(
"--warning-active-color",
Color(warningColor)
.mix(Color("black"), 0.1)
.hex()
);
/****************加载 warning end*************/
/****************加载 danger start*************/
let dangerColor = obj.danger || "#f33";
result = result.replaceAll("--danger-color", dangerColor);
result = result.replaceAll(
"--danger-hover-color",
Color(dangerColor)
.mix(Color("white"), 0.9)
.hex()
);
result = result.replaceAll(
"--danger-border-color",
Color(dangerColor)
.mix(Color("white"), 0.8)
.hex()
);
result = result.replaceAll(
"--danger-hover-border-color",
Color(dangerColor)
.mix(Color("white"), 0.2)
.hex()
);
result = result.replaceAll(
"--danger-plain-border-color",
Color(dangerColor)
.mix(Color("white"), 0.6)
.hex()
);
result = result.replaceAll(
"--danger-disabled-color",
Color(dangerColor)
.mix(Color("white"), 0.5)
.hex()
);
result = result.replaceAll(
"--danger-plain-disabled-color",
Color(dangerColor)
.mix(Color("white"), 0.4)
.hex()
);
result = result.replaceAll(
"--danger-active-color",
Color(dangerColor)
.mix(Color("black"), 0.1)
.hex()
);
/****************加载 danger end*************/
/****************增加head start*************/
$style.append(result);
jquery(jquery("head")[0]).append($style);
/****************增加head end*************/
};
export default transferTheme;
使用css变量
定义一个，以--开头的变量，这样浏览器就会将它当做一个css的变量来进行处理，然后使用var()引用这个变量。
--hover-color:red; //定义变量
background-color: val(--hover-color) //通过css内置函数var，使用变量
在js模板的最后面加上
//设置全局css变量
jquery("body").attr(
"style",
`--primary-color:${primaryColor};
--success-color:${successColor};
--warning-color:${warningColor};
--danger-color:${dangerColor}`
);
