fix(projects): fix app loading theme color

soybeanjs · Jan 17, 2024 · 1ad8dbf · 1ad8dbf
1 parent 3b31b19
commit 1ad8dbf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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 }
     );