elementui 更换主题色

定义CSS变量，由var()函数来获取值。

/* 设定值 */
:root {
    --background-color: #FF0000;
}
/* 获取值 */
div {
    background-color: var(--background-color);
}

JS获取变量

const element = document.documentElement;
const style = window.getComputedStyle(element);
const value = style.getPropertyValue('`background-color`');

JS设置变量

el.style.setProperty('background-color', value)

动态修改 ElementUI 主题色

changeTheme(color, theme) {
      const version = require('element-ui/package.json').version
      const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
      const id = 'chalk-style'
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const res = xhr.responseText
            const newStyle = res.replace(new RegExp(color, 'ig'), theme)
            let styleTag = document.getElementById(id)
            if (!styleTag) {
              styleTag = document.createElement('style')
              styleTag.setAttribute('id', id)
              document.head.appendChild(styleTag)
            }
            styleTag.innerText = newStyle
            resolve()
          }
        }
        xhr.open('GET', url)
        xhr.send()
      })
}

element-plus

import { useUserStore } from '@/store/user'

export function hex2Rgb(color: string) {
  color = color.replace('#', '')
  const result: any = color.match(/../g)
  for (let i = 0; i < 3; i++) {
    result[i] = parseInt(result[i], 16)
  }
  return result
}

export function rgb2Hex(r: number, g: number, b: number) {
  const 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]
    }
  }
  const result = '#' + hexs.join('')
  return result
}

export function lighten(color: string, level: number) {
  const rgb = hex2Rgb(color)
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
  }
  const result = rgb2Hex(rgb[0], rgb[1], rgb[2])
  return result
}

export function darken(color: string, level: number) {
  const rgb = hex2Rgb(color)
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor(rgb[i] * (1 - level))
  }
  const result = rgb2Hex(rgb[0], rgb[1], rgb[2])
  return result
}

export const changeTheme = (value: string) => {
  const el = document.documentElement
  el.style.setProperty(`--el-color-primary`, value)
  for (let i = 1; i <= 9; i++) {
    el.style.setProperty(`--el-color-primary-light-${i}`, lighten(value, i / 10))
    el.style.setProperty(`--el-color-primary-dark-${i}`, darken(value, i / 10))
  }
  localStorage.setItem('themeColor', value)
  const store = useUserStore()
  store.setThemeColor(value)
}

1