Element UI 自定义动态换肤（主题）_element-ui动态更换主题

需求背景：项目需要支持动态换主题，主题色可以随意选择（即用户想用什么颜色的主题就用什么颜色的主题）；而element官网给的 自定义主题 只能是项目里写死，无法实现用户动态切换；

方式一：调接口加载CSS

看了下 element 预览自定义主题 时，也有实现动态换肤，但是研究后它是调的自己的接口实现的（如下图），由于是公司的项目，这种依赖第三方资源/接口的方式肯定不能使用；
它选择颜色后会将颜色作为参数 请求接口：

接口返回的的css

由于需要调用element的接口，这种方案我就直接舍弃了，但是这种方法应该也是可以实现的，调完接口后，创建一个style标签 ，再将返回的css字符串赋给style标签的文本节点，最后插入都head里面（注意需要插入到最后面）

方式二：获取element的默认样式，正则替换默认主题色，然后再插入head里面

参考网站/项目：vue-element-admin 如下图

该项目里面的 ThemePicker组件 可以直接实现该功能，但仔细观察代码后，发现它需要发请求获取到Element UI 的默认样式 index.css，所以需要改一下；
由于项目使用的Element UI的版本是唯一的，直接把 这个样式代码拷贝出来就行了，然后再对其进行操作；
index.css 文件路径： node_modules\element-ui\lib\theme-chalk\index.css

主要实现方法

/*
 * @Author: chengsl
 * @Date: 2021-12-08 09:48:07
 * @LastEditors: chengsl
 * @LastEditTime: 2021-12-09 15:52:45
 * @Description: file content
 */

/**
 * 获取一系列 主题色
 * 入参：67c23a
 * 结果：['67c23a', '103,194,58', '#76c84e', '#85ce61', '#95d475', '#a4da89', '#b3e19d', '#c2e7b0', '#d1edc4', '#e1f3d8', '#f0f9eb', '#5daf34']
 */
function getThemeCluster(theme, type = '') {
  const tintColor = (color, tint) => {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    if (tint === 0) {
      // when primary color is in its rgb space
      return [red, green, blue].join(',')
    } else {
      red += Math.round(tint * (255 - red))
      green += Math.round(tint * (255 - green))
      blue += Math.round(tint * (255 - blue))

      red = red.toString(16)
      green = green.toString(16)
      blue = blue.toString(16)

      return `#${red}${green}${blue}`
    }
  }

  const shadeColor = (color, shade) => {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    red = Math.round((1 - shade) * red)
    green = Math.round((1 - shade) * green)
    blue = Math.round((1 - shade) * blue)

    red = red.toString(16)
    green = green.toString(16)
    blue = blue.toString(16)

    return `#${red}${green}${blue}`
  }

  const clusters = [theme]
  for (let i = 0; i <= 9; i++) {
    clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  }
  clusters.push(shadeColor(theme, 0.1))
  // 这行代码是我自己后面的其他优化所需，可删
  if (type && type === 'new' && clusters.length) {
    clusters.forEach((theme, index) => {
      if (index > 1) {
        document.body.style.setProperty(`--theme-weaken-color-${index}`, clusters[index]) // 逐渐淡化颜色
      }
    })
    console.log('主题色系-------------------', clusters)
  }
  return clusters
}

/**
 * @param style 老的css样式代码
 * @param oldCluster 老的一些列主题色  待替换
 * @param newCluster 新的一系列主题色  替换成
 *
 * @returns newStyle 新的 css样式代码 替换后的
 */
function updateStyle(style, oldCluster, newCluster) {
  let newStyle = style
  oldCluster.forEach((color, index) => {
    // 将老颜色替换成新颜色
    newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index].trim()) // 全局替换 不区分大小写 去掉多余空格
  })
  return newStyle
}

/**
 * main
 */
import ElementUiCSS from './ElementUiCSS.js' // 就是上文说的默认样式 index.css; (字符串)
export const updateThemeColor = function(val) {
  if (typeof val !== 'string' || val.length === 0) return
  const ORIGINAL_THEME = '#409EFF' // default color (element ui的默认主题色，所有我们根据这个去改)
  const ThemeCode = ElementUiCSS
    .replace(/@font-face{[^}]+}/g, '') // 去掉字体样式
    .replace(/.el-icon-[a-zA-Z0-9-:^]+before{content:"[^}]+}/g, '') // 去掉图标样式
  // require('element-ui/lib/theme-chalk/index.css')

  console.log('updateThemeColor ------------------------ in')
  console.log('ORIGINAL_THEME', ORIGINAL_THEME)
  // try {
  //   console.log('ThemeCode', ThemeCode)
  //   console.log('ThemeCode', String(ThemeCode))
  //   console.log('ThemeCode', ThemeCode.innerText)
  // } catch (error) {
  //   console.log(error)
  // }
  // 得到一系列 主题色颜色 (我们需要的颜色 '产出')
  const themeCluster = getThemeCluster(val.replace('#', ''), 'new')
  /**
   * 入参：'chalk'(旧css代码), 'chalk-style'(style的id)
   * 直接 将老的 css 代码里 待改的旧颜色改成 新颜色 然后将新的样式 插入到head标签里
   */
  const getHandler = id => {
    return () => {
      // 得到一系列 主题色颜色 (原始的一些列颜色  待改)
      const originalCluster = getThemeCluster(ORIGINAL_THEME.replace('#', ''))
      const newStyle = updateStyle(ThemeCode, originalCluster, themeCluster)
      // console.log('newStyle', newStyle)

      let styleTag = document.getElementById(id)
      if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', id)
        document.head.appendChild(styleTag)
      }
      styleTag.innerText = newStyle
    }
  }
  const chalkHandler = getHandler('chalk-style')
  chalkHandler()

  console.log('updateThemeColor ------------------------ end')
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

ElementUiCSS.js

export default
// 将文件 node_modules\element-ui\lib\theme-chalk\index.css 的代码粘贴到此
`@charset "UTF-8";.el-paginatio……………………`
1
2
3

使用方法
选好颜色后直接调用该方法就可

/**
* themeColor; 格式：#409EFF
*/
updateThemeColor(themeColor)
1
2
3
4

补充

上面的方法实际上是得到了一系列的新的主题色（12个）；因为有的颜色是根据主题色淡化的形成的颜色，如下图，第一个红框处是主题色，下面第二个红框是根据主题色淡化后的，这个淡化颜色也是通过上面的方法（getThemeCluster）生成出来的；

另外，我采用的方法是将 element-ui 的 index.css 文件的样式代码粘贴出来的，若后期自己项目 element-ui 版本升级或切换了，需要重新粘贴出来覆盖掉；