From b96b5276505fd3e86f4f834c5ecfd10f4209ac3c Mon Sep 17 00:00:00 2001
From: zimo493 <2081182432@qq.com>
Date: Thu, 3 Apr 2025 09:30:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=9C=A8=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E4=B8=BB=E9=A2=98=E8=89=B2=E6=97=B6=E8=80=83=E8=99=91?=
 =?UTF-8?q?=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E5=92=8C=E4=BA=AE=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E7=9A=84=E4=B8=8D=E5=90=8C=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 getDarkColor 和 getLightColor 函数分别用于加深和变浅颜色值

BREAKING CHANGE: 优化颜色调整算法，使主题色在不同模式下更加协调
---
 src/store/modules/settings.store.ts |  2 +-
 src/utils/theme.ts                  | 45 +++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/store/modules/settings.store.ts b/src/store/modules/settings.store.ts
index e713201a..2cea2b59 100644
--- a/src/store/modules/settings.store.ts
+++ b/src/store/modules/settings.store.ts
@@ -34,7 +34,7 @@ export const useSettingsStore = defineStore("setting", () => {
     [theme, themeColor],
     ([newTheme, newThemeColor]) => {
       toggleDarkMode(newTheme === ThemeMode.DARK);
-      const colors = generateThemeColors(newThemeColor);
+      const colors = generateThemeColors(newThemeColor, newTheme);
       applyTheme(colors);
     },
     { immediate: true }
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index e8b78d88..fbf41f00 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -10,27 +10,60 @@ function rgbToHex(r: number, g: number, b: number): string {
 }
 
 // 辅助函数：调整颜色亮度
-function adjustBrightness(hex: string, factor: number): string {
+/** function adjustBrightness(hex: string, factor: number, theme: string): string {
   const rgb = hexToRgb(hex);
+  // 是否是暗黑模式
+  const isDarkMode = theme === "dark" ? 0 : 255;
   const newRgb = rgb.map((val) =>
-    Math.max(0, Math.min(255, Math.round(val + (255 - val) * factor)))
+    Math.max(0, Math.min(255, Math.round(val + (isDarkMode - val) * factor)))
   ) as [number, number, number];
   return rgbToHex(...newRgb);
+} */
+
+/**
+ * 加深颜色值
+ * @param {String} color 颜色值字符串
+ * @param {Number} level 加深的程度，限0-1之间
+ * @returns {String} 返回处理后的颜色值
+ */
+export function getDarkColor(color: string, level: number): string {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
 }
 
-export function generateThemeColors(primary: string) {
+/**
+ * 变浅颜色值
+ * @param {String} color 颜色值字符串
+ * @param {Number} level 加深的程度，限0-1之间
+ * @returns {String} 返回处理后的颜色值
+ */
+export const getLightColor = (color: string, level: number): string => {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
+
+/**
+ * 生成主题色
+ * @param primary 主题色
+ * @param theme 主题类型
+ */
+export function generateThemeColors(primary: string, theme: string) {
   const colors: Record<string, string> = {
     primary,
   };
 
   // 生成浅色变体
   for (let i = 1; i <= 9; i++) {
-    const factor = i * 0.1;
-    colors[`primary-light-${i}`] = adjustBrightness(primary, factor);
+    const primaryColor =
+      theme === "light" ? `${getLightColor(primary, i / 10)}` : `${getDarkColor(primary, i / 10)}`;
+    colors[`primary-light-${i}`] = primaryColor;
   }
 
   // 生成深色变体
-  colors["primary-dark-2"] = adjustBrightness(primary, -0.2);
+  colors["primary-dark-2"] =
+    theme === "light" ? `${getLightColor(primary, 0.2)}` : `${getDarkColor(primary, 0.3)}`;
 
   return colors;
 }
-- 
Gitee