【vue3】【elementPlus】【自定义主题色】

如果从0-1开始搭建项目，请参考：
https://editor.csdn.net/md/?articleId=140995569

1.创建主题工具js文件(命名随便)：

// theme.js 代码

import { ElMessage } from 'element-plus'

/**
 * 颜色转换函数
 * @method hexToRgb hex 颜色转 rgb 颜色
 * @method rgbToHex rgb 颜色转 Hex 颜色
 * @method getDarkColor 加深颜色值
 * @method getLightColor 变浅颜色值
 */
export function useChangeColor() {
  // str 颜色值字符串
  const hexToRgb = (str) => {
    let hexs = ''
    let reg = /^\#?[0-9A-Fa-f]{6}$/
    if (!reg.test(str)) {
      ElMessage.warning('输入错误的hex')
      return ''
    }
    str = str.replace('#', '')
    hexs = str.match(/../g)
    for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)
    return hexs
  }
  // r 代表红色 | g 代表绿色 | b 代表蓝色
  const rgbToHex = (r, g, b) => {
    let reg = /^\d{1,3}$/
    if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
      ElMessage.warning('输入错误的rgb颜色值')
      return ''
    }
    let hexs = [r.toString(16), g.toString(16), b.toString(16)]
    for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`
    return `#${hexs.join('')}`
  }
  // color 颜色值字符串 | level 变浅的程度，限0-1之间
  const getDarkColor = (color, level) => {
    let reg = /^\#?[0-9A-Fa-f]{6}$/
    if (!reg.test(color)) {
      ElMessage.warning('输入错误的hex颜色值')
      return ''
    }
    let rgb = useChangeColor().hexToRgb(color)
    for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
    return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
  }
  // color 颜色值字符串 | level 加深的程度，限0-1之间
  const getLightColor = (color, level) => {
    let reg = /^\#?[0-9A-Fa-f]{6}$/
    if (!reg.test(color)) {
      ElMessage.warning('输入错误的hex颜色值')
      return ''
    }
    let rgb = useChangeColor().hexToRgb(color)
    for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
    return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
  }


  const  themeList = [
    {'label':'主题1','value':{  'primary' : '#0B9B8A', 'success': '#0B9B2A', 'info': '#3F7EAB', 'warning': '#EDAF43', 'danger': '#F596A1'}},
    {'label':'主题2','value':{'primary': '#6168FC', 'success': '#F8BDDA', 'info': '#77B5FF', 'warning': '#90507C', 'danger': '#FF349A'}},
  ]

  // themeValue 主题value值
  const changeThemeByColor = (themeValue)=>{
    const symbolList = ['primary','success','info','warning','danger']
    
    // TODO 待完善：后期可从缓存中优先读取主题

    const colorObj = themeValue;
    symbolList.forEach(item=>{
      const color = colorObj[item];
      const elColor = `--el-color-${item}`;
      const elColorDark = `--el-color-${item}-dark-2`;
      const elColorLight = `--el-color-${item}-light`;
      document.documentElement.style.setProperty(elColor, color)
      document.documentElement.style.setProperty(elColorDark, `${getDarkColor(color, 0.1)}`)
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(elColorLight+`-${i}`, `${getLightColor(color, i / 10)}`)
      }
    })

  }

  return {
    hexToRgb,
    rgbToHex,
    getDarkColor,
    getLightColor,
    changeThemeByColor,
    themeList,
  }
}

2.从组件中进行主题色切换：

<template>
  <div style="width: 50%;">
    <el-select  @change="changeThemeColor" v-model="selectModel" >
      <el-option v-for="item in themeList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>

  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div class="mb-4">
          <el-button>Default</el-button>
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="info">Info</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
        </div>
        <p> ?</p>
        <div class="mb-4">
          <el-button plain>Plain</el-button>
          <el-button type="primary" plain>Primary</el-button>
          <el-button type="success" plain>Success</el-button>
          <el-button type="info" plain>Info</el-button>
          <el-button type="warning" plain>Warning</el-button>
          <el-button type="danger" plain>Danger</el-button>
        </div>
    </el-card>
    
    
   
  </div>
</template>

<script setup lang="ts">
import{ useChangeColor } from '../utils/theme.js'
import { ref } from "vue";
const selectModel = ref(null);
const { changeThemeByColor,themeList  } = useChangeColor()

/**
 * 切换主题颜色
 */
 function changeThemeColor(val) {
 console.log('选中配色：',val)
  changeThemeByColor(val);
}

</script>

<style scoped></style>

3.切换效果：

2.

4.如果需要自定义颜色，只需要修改theme.js中的themeList变量：

将themeList数组中的颜色改做自己喜欢的即可。
这是一个色彩搭配网址

5.后期可加入缓存思路，这样当客户切换颜色后放入缓存中，客户每次刷新网站优先读取缓存配置，就可保证持久化主题色了。