From 9f5e18cc415cd3fef13f105ffeabae3c01ba9665 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 13:02:18 +0800
Subject: [PATCH] 样式修改
---
src/utils/theme.js | 142 ++++++++++++++++++++++++++++++----------------
1 files changed, 92 insertions(+), 50 deletions(-)
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 90a511e..9d6ef0d 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -1,74 +1,116 @@
// 澶勭悊涓婚鏍峰紡
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)
+ 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("--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)
+ // 绯荤粺涓婚鑱斿姩鍒颁晶杈规爮閫変腑鎬佷笌楂樹寒
+ 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)`);
+
+ // 琛ㄦ牸琛ㄥご棰滆壊鑱斿姩 (璺熼殢涓婚锛屼絾棰滆壊杈冩祬)
+ const tableHeaderBg = getLightColor(primary, 0.92);
+ const tableHeaderText = getDarkColor(primary, 0.6); // 濮嬬粓鍥哄畾涓烘繁鑹诧紝浠ヨ鐩栨祬鑹茬増鏈殑闇�姹�
+ document.documentElement.style.setProperty("--table-header-bg-custom", tableHeaderBg);
+ document.documentElement.style.setProperty("--table-header-text-custom", tableHeaderText);
+
+ // 杈规棰滆壊鑱斿姩
+ document.documentElement.style.setProperty("--surface-border", `rgba(${r}, ${g}, ${b}, 0.12)`);
}
// hex棰滆壊杞瑀gb棰滆壊
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
+ 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棰滆壊杞琱ex棰滆壊
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('')}`
+ 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])
+ 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])
+ 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()}`
+ 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()}`;
}
--
Gitblit v1.9.3