vue3：主题色解决方案

Posted 2022-07-12 岁月可贵

# 主题色修改

# 原理

修改主题色关键点是 色值不能写死。

在该解决方案中，主要涉及的是 element-plus 以及 非 element-plus 的主题色修改。

---

对于非 element-plus 解决方法如下：

1、全局定义scss变量，页面绑定该变量，通过修改该变量值，从而使页面主题色进行修改。

2、并且该变量要实现响应式，永久保存（避免页面刷新色值被覆盖）。因此需要结合本地缓存以及vuex将值保存好。

3、初始时通过 getters 获取主题色的同时，使用 generateColors 函数生成新的色值表，与 scss色值表 进行匹配替换。

---

对于 element-plus 解决方案如下：

1、获取当前 element-plus 的所有样式。

2、找到要替换的样式（关键）。

3、把替换后的样式利用style的优先级高于外部引入样式的方式加载样式表。

---

# 非 element-plus

第一步：定义scss变量文件，结合vuex将其保存到本地缓存中。

// variables.scss
$menuBg: #304156;