【vue3】：主题色解决方案

# 主题色修改

# 原理

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

在该解决方案中，主要涉及的是 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;
:export {
   
    menuBg: $menuBg;
}

// module/theme.js
import variable from '@/styles/variables.scss'
export default {
   
  namespaced: true,
  state: () => ({
   
    //  (非 element-plus)
    variable: variable,
    // （element-plus）
    mainColor: getItem("mainColor") || '#304156',  
  }),
  setMainColor (state, newColor) {
   
      //  (非 element-plus)
      state.variable.menuBg = newColor
      // （element-plus）
      state.mainColor = newColor
      // 保存到缓存中
      setItem('mainColor', newColor)
    }  
}  

注：第 8 行 以及 第 15 行代码在修改 非 element-plus 主题色中没有任何作用，设置在这里目的在于避免后面讲修改 element-plus 在来设置显的很突兀。

// index.js
import {
    createStore } from 'vuex'
import theme from './modules/theme.js'
import getters from './getters'
export default createStore({
   
  getters,
  modules: {
   
    theme
  }
})

getItem 和 setItem分别为通过 key 获取和保存在本地缓存的数据，需自行封装。

---

第二步：修改主题色

使用element-plus 中的取色器

这一步操作放在最后（小节-最后补充），结合 element-plus 修改主题色在一起写。

---

第三步：页面初次打开，以及再次打开时，生成新的色值表，并渲染缓存中的颜色。

// getters.js
const getters = {
   
    cssVar: state => ({
   
        ...state.theme.variable,
        ...generateColors(getItem('mainColor'))
    })
    // （element-plus）
    mainColor: state => state.theme.mainColor
}

解释：

（1）这里是根据缓存中的主题色，生成新的色值表（generateColors），在跟scss变量文件进行比较替换。

（2）generateColors 具体是如何生成新的色值，请看 element-plus修改主题色的方案 中具体会涉及到，这里简单一笔带过。

（3）同样 第 8 行代码在这里也没有太大作用。

类似于最终要呈现出来的效果为：

cssVar: state => ({
   
    menuBg: '#304156',
    menuBg: 'red',
})

最终通过替换，