首先定义一个全局方法,根据用户选择的颜色进行设置
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>