From 0ba19d5479744e23e0088b98cd1ba4ceb6dbb4c4 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Thu, 18 Jan 2024 02:43:07 +0800
Subject: [PATCH] fix(projects): fix app loading theme color

---
 src/components/common/app-loading.vue | 9 +++++----
 src/store/modules/theme/index.ts      | 6 ++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/common/app-loading.vue b/src/components/common/app-loading.vue
index b4eba669..af7e8f0c 100644
--- a/src/components/common/app-loading.vue
+++ b/src/components/common/app-loading.vue
@@ -10,20 +10,21 @@ const loadingClasses = [
   'right-0 bottom-0 animate-delay-1500'
 ];
 
+const style = addThemeColorCssVars();
+
 function addThemeColorCssVars() {
   const themeColor = localStg.get('themeColor') || '#646cff';
 
   const { r, g, b } = getRgbOfColor(themeColor);
 
   const cssVars = `--primary-color: ${r} ${g} ${b}`;
-  document.documentElement.style.cssText = cssVars;
-}
 
-addThemeColorCssVars();
+  return cssVars;
+}
 </script>
 
 <template>
-  <div class="fixed-center flex-col">
+  <div class="fixed-center flex-col" :style="style">
     <SystemLogo class="text-128px text-primary" />
     <div class="w-56px h-56px my-36px">
       <div class="relative h-full animate-spin">
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 5428385f..248c479a 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -126,11 +126,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       { immediate: true }
     );
 
-    // themeColors change, update css vars
+    // themeColors change, update css vars and storage theme color
     watch(
       themeColors,
-      () => {
+      val => {
         setupThemeVarsToHtml();
+
+        localStg.set('themeColor', val.primary);
       },
       { immediate: true }
     );