refactor: ♻️ 自定义主题色，参考arco.design主题色值修改主色

src/store/modules/settings.ts

@@ -1,68 +1,50 @@
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-import Color from "color";
+import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
 
 type SettingsValue = boolean | string;
 
 export const useSettingsStore = defineStore("setting", () => {
-  // 是否显示设置
+  // 基本设置
   const settingsVisible = ref(false);
-  // 是否显示标签视图
+  // 标签
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
-  // 是否显示侧边栏logo
+  // 侧边栏 Logo
   const sidebarLogo = useStorage<boolean>(
     "sidebarLogo",
     defaultSettings.sidebarLogo
   );
-  // 是否固定头部
+  // 固定头部
   const fixedHeader = useStorage<boolean>(
     "fixedHeader",
     defaultSettings.fixedHeader
   );
-  // 布局模式：left-左侧模式(默认) top-顶部模式 mix-混合模式
+  // 布局
   const layout = useStorage<string>("layout", defaultSettings.layout);
-  // 主题颜色
-  const themeColor = useStorage<string>(
-    "themeColor",
-    defaultSettings.themeColor
-  );
-  // 主题：light-亮色(默认) dark-暗色
-  const theme = useStorage<string>("theme", defaultSettings.theme);
-  // 是否开启水印
+  // 水印
   const watermarkEnabled = useStorage<boolean>(
     "watermarkEnabled",
     defaultSettings.watermarkEnabled
   );
 
+  // 主题
+  const themeColor = useStorage<string>(
+    "themeColor",
+    defaultSettings.themeColor
+  );
+  const theme = useStorage<string>("theme", defaultSettings.theme);
+
+  // 监听主题变化
   watch(
     [theme, themeColor],
-    ([newTheme, newThemeColor], [oldTheme, oldThemeColor]) => {
-      if (newTheme !== oldTheme) {
-        if (newTheme === ThemeEnum.DARK) {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-      }
-
-      if (newThemeColor !== oldThemeColor) {
-        const rootStyle = document.documentElement.style;
-        rootStyle.setProperty(`--el-color-primary`, newThemeColor);
-        rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor);
-
-        for (let i = 1; i < 10; i++) {
-          rootStyle.setProperty(
-            `--el-color-primary-light-${i}`,
-            `${Color(newThemeColor).alpha(1 - i * 0.1)}`
-          );
-        }
-      }
+    ([newTheme, newThemeColor]) => {
+      toggleDarkMode(newTheme === ThemeEnum.DARK);
+      const colors = generateThemeColors(newThemeColor);
+      applyTheme(colors);
     },
-    {
-      immediate: true, // 立即执行，确保在侦听器创建时执行一次
-    }
+    { immediate: true }
   );
-
+  // 设置更改函数
   const settingsMap: Record<string, Ref<SettingsValue>> = {
     fixedHeader,
     tagsView,
@@ -79,31 +61,17 @@ export const useSettingsStore = defineStore("setting", () => {
     value: SettingsValue;
   }) {
     const setting = settingsMap[key];
-    if (setting) {
-      setting.value = value;
-    }
+    if (setting) setting.value = value;
   }
 
-  /**
-   * 切换主题
-   */
   function changeTheme(val: string) {
     theme.value = val;
   }
 
-  /**
-   * 切换主题颜色
-   *
-   * @param color 主题颜色
-   *
-   */
   function changeThemeColor(color: string) {
     themeColor.value = color;
   }
 
-  /**
-   * 切换布局
-   */
   function changeLayout(val: string) {
     layout.value = val;
   }