实现原理：

  1. 获取当前 element-plus 的所有样式
  2. 找到我们想要替换的样式部分，通过正则完成替换
  3. 把替换后的样式写入到 style 标签中，利用样式优先级的特性，替代固有样式

实现步骤：

  1. 获取当前 element-plus 的所有样式
  2. 定义我们要替换之后的样式
  3. 在原样式中，利用正则替换新样式
  4. 把替换后的样式写入到 style 标签中

    方案落地

    创建 utils/theme 工具类，写入两个方法 ```javascript /**
    • 写入新样式到 style
    • @param {*} elNewStyle element-plus 的新样式
    • @param {} isNewStyleTag 是否生成新的 style 标签 / export const writeNewStyle = elNewStyle => {

}

/**

  • 根据主色值，生成最新的样式表 */ export const generateNewStyle = primaryColor => {

}

  1. 那么接下来我们先实现第一个方法 `generateNewStyle`，在实现的过程中，我们需要安装两个工具类：
  3. 1. [rgb-hex](https://www.npmjs.com/package/rgb-hex)：转换RGB(A)颜色为十六进制
  4. 1. [css-color-function](https://www.npmjs.com/package/css-color-function)：在CSS中提出的颜色函数的解析器和转换器
  6. 然后还需要写入一个 **颜色转化计算器  **`**formula.json**`<br />创建 `constants/formula.json` （https://gist.github.com/benfrain/7545629）
  7. ```json
  8. {
  9.   "shade-1": "color(primary shade(10%))",
  10.   "light-1": "color(primary tint(10%))",
  11.   "light-2": "color(primary tint(20%))",
  12.   "light-3": "color(primary tint(30%))",
  13.   "light-4": "color(primary tint(40%))",
  14.   "light-5": "color(primary tint(50%))",
  15.   "light-6": "color(primary tint(60%))",
  16.   "light-7": "color(primary tint(70%))",
  17.   "light-8": "color(primary tint(80%))",
  18.   "light-9": "color(primary tint(90%))",
  19.   "subMenuHover": "color(primary tint(70%))",
  20.   "subMenuBg": "color(primary tint(80%))",
  21.   "menuHover": "color(primary tint(90%))",
  22.   "menuBg": "color(primary)"
  23. }

准备就绪后，我们来实现 generateNewStyle 方法：

  1. import color from 'css-color-function'
  2. import rgbHex from 'rgb-hex'
  3. import formula from '@/constant/formula.json'
  4. import axios from 'axios'
  6. /**
  7.  * 根据主色值，生成最新的样式表
  8.  */
  9. export const generateNewStyle = async primaryColor => {
  10.   const colors = generateColors(primaryColor)
  11.   let cssText = await getOriginalStyle()
  13.   // 遍历生成的样式表，在 CSS 的原样式中进行全局替换
  14.   Object.keys(colors).forEach(key => {
  15.     cssText = cssText.replace(
  16.       new RegExp('(:|\\s+)' + key, 'g'),
  17.       '$1' + colors[key]
  18.     )
  19.   })
  21.   return cssText
  22. }
  24. /**
  25.  * 根据主色生成色值表
  26.  */
  27. export const generateColors = primary => {
  28.   if (!primary) return
  29.   const colors = {
  30.     primary
  31.   }
  32.   Object.keys(formula).forEach(key => {
  33.     const value = formula[key].replace(/primary/g, primary)
  34.     colors[key] = '#' + rgbHex(color.convert(value))
  35.   })
  36.   return colors
  37. }
  39. /**
  40.  * 获取当前 element-plus 的默认样式表
  41.  */
  42. const getOriginalStyle = async () => {
  43.   const version = require('element-plus/package.json').version
  44.   const url = `https://unpkg.com/element-plus@${version}/dist/index.css`
  45.   const { data } = await axios(url)
  46.   // 把获取到的数据筛选为原样式模板
  47.   return getStyleTemplate(data)
  48. }
  50. /**
  51.  * 返回 style 的 template
  52.  */
  53. const getStyleTemplate = data => {
  54.   // element-plus 默认色值
  55.   const colorMap = {
  56.     '#3a8ee6': 'shade-1',
  57.     '#409eff': 'primary',
  58.     '#53a8ff': 'light-1',
  59.     '#66b1ff': 'light-2',
  60.     '#79bbff': 'light-3',
  61.     '#8cc5ff': 'light-4',
  62.     '#a0cfff': 'light-5',
  63.     '#b3d8ff': 'light-6',
  64.     '#c6e2ff': 'light-7',
  65.     '#d9ecff': 'light-8',
  66.     '#ecf5ff': 'light-9'
  67.   }
  68.   // 根据默认色值为要替换的色值打上标记
  69.   Object.keys(colorMap).forEach(key => {
  70.     const value = colorMap[key]
  71.     data = data.replace(new RegExp(key, 'ig'), value)
  72.   })
  73.   return data
  74. }

接下来处理 writeNewStyle 方法：

  1. /**
  2.  * 写入新样式到 style
  3.  * @param {*} elNewStyle  element-plus 的新样式
  4.  * @param {*} isNewStyleTag 是否生成新的 style 标签
  5.  */
  6. export const writeNewStyle = elNewStyle => {
  7.   const style = document.createElement('style')
  8.   style.innerText = elNewStyle
  9.   document.head.appendChild(style)
  10. }

最后在 SelectColor.vue 中导入这两个方法：

  1. ...
  3. <script setup>
  4. ...
  5. import { generateNewStyle, writeNewStyle } from '@/utils/theme'
  6. ...
  7. /**
  8.  * 确定
  9.  * 1. 修改主题色
  10.  * 2. 保存最新的主题色
  11.  * 3. 关闭 dialog
  12.  */
  14. const comfirm = async () => {
  15.   // 1.1 获取主题色
  16.   const newStyleText = await generateNewStyle(mColor.value)
  17.   // 1.2 写入最新主题色
  18.   writeNewStyle(newStyleText)
  19.   // 2. 保存最新的主题色
  20.   store.commit('theme/setMainColor', mColor.value)
  21.   // 3. 关闭 dialog
  22.   closed()
  23. }
  24. </script>

一些处理完成之后，我们可以在 profile 中通过一些代码进行测试：

  1. <el-row>
  2.       <el-button>Default</el-button>
  3.       <el-button type="primary">Primary</el-button>
  4.       <el-button type="success">Success</el-button>
  5.       <el-button type="info">Info</el-button>
  6.       <el-button type="warning">Warning</el-button>
  7.       <el-button type="danger">Danger</el-button>
  8.     </el-row>

element-plus 新主题的立即生效

目前 element-plus 的主题变更还有一个小问题，那就是：在刷新页面后，新主题会失效
出现这个问题的原因：因为没有写入新的 **style**
所以我们只需要在 应用加载后，写入 **style** 即可
那么写入的时机，我们可以放入到 app.vue 中

  1. <script setup>
  2. import { useStore } from 'vuex'
  3. import { generateNewStyle, writeNewStyle } from '@/utils/theme'
  5. const store = useStore()
  6. generateNewStyle(store.getters.mainColor).then(newStyleText => {
  7.   writeNewStyle(newStyleText)
  8. })
  9. </script>