feat: 主题色初始化

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@arco-design/color':
     specifier: ^0.4.0
@@ -5302,3 +5298,7 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/App.vue

@@ -6,12 +6,13 @@
 
 <script setup lang="ts">
 import { loadingPage } from "@/utils/loading-page";
-import { useRoutingMethod } from "@/hooks/useThemeMethods";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 // 初始化主题
 const onTheme = () => {
-  let { darkMode } = useRoutingMethod();
-  darkMode();
+  let { setDarkMode, setThemeColor } = useThemeMethods();
+  setDarkMode();
+  setThemeColor();
 };
 onTheme();
 

src/hooks/useThemeMethods.ts

@@ -1,11 +1,12 @@
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { generate, getRgbStr } from "@arco-design/color";
 /* 主题处理hooks */
-export const useRoutingMethod = () => {
+export const useThemeMethods = () => {
   /**
    * @description: 暗黑模式
    */
-  const darkMode = () => {
+  const setDarkMode = () => {
     const themeStore = useThemeConfig();
     const { darkMode } = storeToRefs(themeStore);
     if (darkMode.value) {
@@ -16,7 +17,24 @@ export const useRoutingMethod = () => {
       document.body.removeAttribute("arco-theme");
     }
   };
+
+  /**
+   * @description: 主题色设置
+   */
+  const setThemeColor = () => {
+    const themeStore = useThemeConfig();
+    const { themeColor, darkMode } = storeToRefs(themeStore);
+    // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
+    let list = generate(themeColor.value, { list: true, dark: darkMode.value });
+    list.forEach((color: string, index: number) => {
+      // https://arco.design/palette/list
+      // arco的颜色等级为1-10，这里需要index+1
+      document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color));
+    });
+  };
+
   return {
-    darkMode
+    setDarkMode,
+    setThemeColor
   };
 };

src/layout/components/Header/components/header-right/index.vue

@@ -114,6 +114,7 @@ import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useUserInfoStore } from "@/store/modules/user-info";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 const i18n = useI18n();
 const router = useRouter();
 const themeStore = useThemeConfig();
@@ -147,13 +148,8 @@ const onFullScreen = () => {
 // 黑暗模式
 const onNightMode = () => {
   darkMode.value = !darkMode.value;
-  if (darkMode.value) {
-    // 设置为暗黑主题
-    document.body.setAttribute("arco-theme", "dark");
-  } else {
-    // 恢复亮色主题
-    document.body.removeAttribute("arco-theme");
-  }
+  let { setDarkMode } = useThemeMethods();
+  setDarkMode();
 };
 
 // 语言

src/layout/components/Header/components/theme-settings/index.vue

@@ -49,10 +49,10 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
-import { generate, getRgbStr } from "@arco-design/color";
+import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 const themeStore = useThemeConfig();
-const { layoutType, themeColor, darkMode } = storeToRefs(themeStore);
+const { layoutType, themeColor } = storeToRefs(themeStore);
 
 const layoutList = reactive({
   layoutDefaults: {
@@ -75,13 +75,8 @@ const layoutList = reactive({
 // 主题色设置
 const themeColorChange = (value: string) => {
   themeColor.value = value;
-  // 对于给定的颜色，使用算法生成包含10种颜色的渐变样本。这适用于光模式和暗模式。
-  let list = generate(themeColor.value, { list: true, dark: darkMode.value });
-  list.forEach((color: string, index: number) => {
-    // https://arco.design/palette/list
-    // arco的颜色等级为1-10，这里需要index+1
-    document.body.style.setProperty(`--primary-${index + 1}`, getRgbStr(color));
-  });
+  const { setThemeColor } = useThemeMethods();
+  setThemeColor();
 };
 
 // 布局变化