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 }
     );