OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix：明暗主题随机颜色方法修复

Browse Source
This commit is contained in:
zhongzm
2024-11-22 16:15:25 +08:00
parent 45d8314e29
commit f318f61b4a
2 changed files with 72 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/utils/generate-utils.ts
View File

@@ -13,29 +13,41 @@ export function generateColorHEX(): string {
* @returns rgb(24 144 255) / rgba(0,0,0,.85)
*/
export function generateColorRGBA(hasAlpha: boolean = false) {
let red:number;
let green: number;
let blue:number;
red = Math.floor(Math.random() * 256)+100;//+100增加顏色亮度
green = Math.floor(Math.random() * 256)+100;
blue = Math.floor(Math.random() * 256)+100;
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
const brightChannel = Math.floor(Math.random() * 3);
switch (brightChannel) {
case 0:
red = Math.min(255, red + 50);
break;
case 1:
green = Math.min(255, green + 50);
break;
case 2:
blue = Math.min(255, blue + 50);
break;
let red: number;
let green: number;
let blue: number;
if (isDark) {
// 暗色模式下生成较亮的颜色
red = Math.floor(Math.random() * 156) + 100; // 100-255
green = Math.floor(Math.random() * 156) + 100; // 100-255
blue = Math.floor(Math.random() * 156) + 100; // 100-255
// 确保至少有一个通道的值较高，使颜色更明亮
const brightChannel = Math.floor(Math.random() * 3);
switch (brightChannel) {
case 0:
red = Math.min(255, red + 50);
break;
case 1:
green = Math.min(255, green + 50);
break;
case 2:
blue = Math.min(255, blue + 50);
break;
}
} else {
// 亮色模式下生成正常的颜色
red = Math.floor(Math.random() * 256); // 0-255
green = Math.floor(Math.random() * 256); // 0-255
blue = Math.floor(Math.random() * 256); // 0-255
}
if (hasAlpha) {
const alpha = Math.floor(Math.random() * 100)+50;
return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`;
const alpha = Math.floor(Math.random() * 100);
return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`;
}
return `rgb(${red}, ${green}, ${blue})`;