elementPlus修改主题色以及皮肤设置思路

修改主题色

采用element颜色选择的组件

// 变量前缀
colorChange(e) {
	// e就是选择了的颜色
	const pre = "--el-color-primary";
	// 白色混合色
	const mixWhite = "#ffffff";
	// 黑色混合色
	const mixBlack = "#000000";
	const el = document.documentElement;
	el.style.setProperty(pre, e);
	// 这里是覆盖原有颜色的核心代码
	for (let i = 1; i < 10; i += 1) {
	  el.style.setProperty(`${pre}-light-${i}`, mix(e, mixWhite, i * 0.1));
	}
	el.style.setProperty("--el-color-primary-dark", mix(e, mixBlack, 0.1));
}

系统皮肤

通过提前定义好各种皮肤风格

通过vue的store以及localStorage去动态修改
同时代码中要使用变量方式引入store中的主题颜色