Vue3 + Element Plus 后台管理项目实现动态切换主题色

首先定义一个全局方法，根据用户选择的颜色进行设置

const setColor = (
  key: string,
  value: any,
  dom = document.documentElement
): void => {
  dom.style.setProperty(key, value);
};
//执行
setColor("--el-color-primary", "#ff0000");//即可改变主题颜色 

只进行如上设置如出现 hover 与主题色不一致问题，此时还需要增配置颜色

setColor("--el-color-primary-light-9", "#ff0000");
setColor("--el-color-primary-light-3", "#ff0000");
//此时 hover 效果会消失

解决 hover 消失问题

//十六进制格式转 RGB 格式
const hex2Rgb = (color: string): number[] => {
  const colors = color.replace("#", "").match(/../g) || ["0"];
  const result = [];
  for (let i = 0; i < 3; i++) {
    result[i] = parseInt(colors[i], 16);
  }
  return result;
};

//RGB 格式转十六进制格式
const rgb2Hex = (r: number, g: number, b: number): string => {
  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;
};

//使颜色变亮
const lighten = (color: string, level: number): string => {
  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;
};

//使颜色变暗
const darken = (color: string, level: number): string => {
  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;
};
  
const setThemeColor = (color:string):void => {
  setColor("--el-color-primary", color);
  setColor("--el-color-primary-light-9", darken(color, 0.9));
  setColor("--el-color-primary-light-3", lighten(color,0.3));
};

完整代码

<template>
	<div>
		<el-button @click="setThemeColor('#56AB2F')" type="primary">
			SET #56AB2F
		</el-button>
		<el-button @click="setThemeColor('#ff0000')" type="primary">
			SET #FF0000
		</el-button>
	</div>
</template>

<script setup lang="ts">
//设置主题色
const setColor = (
  key: string,
  value: any,
  dom = document.documentElement
): void => {
  dom.style.setProperty(key, value);
};

//十六进制格式转 RGB 格式
const hex2Rgb = (color: string): number[] => {
  const colors = color.replace("#", "").match(/../g) as string[];
  const result = [];
  for (let i = 0; i < 3; i++) {
    result[i] = parseInt(colors[i], 16);
  }
  return result;
};

//RGB 格式转十六进制格式
const rgb2Hex = (r: number, g: number, b: number): string => {
  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;
};

//使颜色变亮
const lighten = (color: string, level: number): string => {
  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;
};

//使颜色变暗
const darken = (color: string, level: number): string => {
  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;
};
  
const setThemeColor = (color:string):void => {
  setColor("--el-color-primary", color);
  setColor("--el-color-primary-light-9", darken(color, 0.9));
  setColor("--el-color-primary-light-3", lighten(color,0.3));
};
</script>