// 处理主题样式
|
export function handleThemeStyle(theme) {
|
const primary = normalizeHex(theme);
|
const [r, g, b] = hexToRgb(primary);
|
const light2 = getLightColor(primary, 0.2);
|
const light3 = getLightColor(primary, 0.3);
|
const light5 = getLightColor(primary, 0.5);
|
|
document.documentElement.style.setProperty("--el-color-primary", primary);
|
document.documentElement.style.setProperty("--el-color-primary-rgb", `${r}, ${g}, ${b}`);
|
for (let i = 1; i <= 9; i++) {
|
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(primary, i / 10)}`);
|
}
|
for (let i = 1; i <= 9; i++) {
|
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(primary, i / 10)}`);
|
}
|
|
// 系统主题联动到侧边栏选中态与高亮
|
document.documentElement.style.setProperty("--menu-active-bg", `linear-gradient(135deg, ${primary} 0%, ${light3} 100%)`);
|
document.documentElement.style.setProperty("--menu-active-glow", `0 10px 24px rgba(${r}, ${g}, ${b}, 0.32)`);
|
document.documentElement.style.setProperty("--menu-hover", `rgba(${r}, ${g}, ${b}, 0.2)`);
|
document.documentElement.style.setProperty("--accent-primary", primary);
|
document.documentElement.style.setProperty("--accent-light", light2);
|
document.documentElement.style.setProperty("--accent-lighter", light5);
|
|
// 新增：侧边栏与导航栏动态色彩联动
|
// 侧边栏背景：极深的主题色变体，增加一点深度感
|
const sidebarBg = getDarkColor(primary, 0.15);
|
document.documentElement.style.setProperty("--sidebar-bg", sidebarBg);
|
|
// 导航栏背景：带透明度的主题色变体，实现玻璃拟态
|
document.documentElement.style.setProperty("--navbar-bg", `rgba(${r}, ${g}, ${b}, 0.85)`);
|
|
// 页签栏背景：极浅的主题色变体，增加呼吸感
|
const tagsBg = getLightColor(primary, 0.96);
|
document.documentElement.style.setProperty("--tags-bg", tagsBg);
|
|
// 文本颜色适配逻辑
|
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
const isDarkTheme = brightness < 128;
|
|
// 导航栏文字颜色：根据主题色亮度自动切换深浅
|
document.documentElement.style.setProperty("--navbar-text", isDarkTheme ? "#f8fafc" : "#1e293b");
|
|
// 侧边栏文字与图标颜色
|
document.documentElement.style.setProperty("--sidebar-text", isDarkTheme ? "rgba(255, 255, 255, 0.75)" : "rgba(15, 23, 42, 0.75)");
|
document.documentElement.style.setProperty("--sidebar-muted", isDarkTheme ? "rgba(255, 255, 255, 0.45)" : "rgba(15, 23, 42, 0.45)");
|
|
// 激活项文字颜色：始终保持高对比度
|
document.documentElement.style.setProperty("--menu-active-text", isDarkTheme ? "#ffffff" : "#ffffff"); // 通常主色调激活态用白色
|
|
// 悬停与激活状态颜色
|
document.documentElement.style.setProperty("--menu-hover", `rgba(${r}, ${g}, ${b}, ${isDarkTheme ? 0.12 : 0.08})`);
|
document.documentElement.style.setProperty("--navbar-hover", `rgba(${r}, ${g}, ${b}, 0.1)`);
|
|
// 边框颜色联动
|
document.documentElement.style.setProperty("--surface-border", `rgba(${r}, ${g}, ${b}, 0.12)`);
|
}
|
|
// hex颜色转rgb颜色
|
export function hexToRgb(str) {
|
str = normalizeHex(str).replace("#", "");
|
const hexs = str.match(/../g) || ["40", "9e", "ff"];
|
for (let i = 0; i < 3; i++) {
|
hexs[i] = parseInt(hexs[i], 16);
|
}
|
return hexs;
|
}
|
|
// rgb颜色转hex颜色
|
export function rgbToHex(r, g, b) {
|
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]}`;
|
}
|
}
|
return `#${hexs.join("")}`;
|
}
|
|
// 变浅颜色值
|
export function getLightColor(color, level) {
|
const rgb = hexToRgb(color);
|
for (let i = 0; i < 3; i++) {
|
rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
}
|
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
}
|
|
// 变深颜色值
|
export function getDarkColor(color, level) {
|
const rgb = hexToRgb(color);
|
for (let i = 0; i < 3; i++) {
|
rgb[i] = Math.floor(rgb[i] * (1 - level));
|
}
|
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
}
|
|
function normalizeHex(color) {
|
if (!color || typeof color !== "string") return "#409eff";
|
let value = color.trim().replace("#", "");
|
if (value.length === 3) {
|
value = value
|
.split("")
|
.map(s => s + s)
|
.join("");
|
}
|
if (!/^[0-9a-fA-F]{6}$/.test(value)) return "#409eff";
|
return `#${value.toLowerCase()}`;
|
}
|
