fix(projects): 🐛 adjust the read strategy for theme configuration. fixed [#117]

.env.development

@@ -1,2 +0,0 @@
-VITE_HTTP_PROXY=Y
-

.env.production

@@ -1 +0,0 @@
-VITE_ROUTER_HISTORY_MODE=history

src/store/modules/theme/index.ts

@@ -1,10 +1,11 @@
 import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
+import { usePreferredColorScheme } from '@vueuse/core';
 import { defineStore } from 'pinia';
-import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
 import { getPaletteColorByNumber } from '@sa/color';
-import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
+import { themeSettings } from '@/theme/settings';
+import { SetupStoreId } from '@/enum';
 import {
   addThemeVarsToGlobal,
   createThemeToken,
@@ -59,9 +60,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
 
   /** Reset store */
   function resetStore() {
-    const themeStore = useThemeStore();
-
-    themeStore.$reset();
+    settings.value = themeSettings;
   }
 
   /**
@@ -155,7 +154,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
 
   /** Cache theme settings */
   function cacheThemeSettings() {
-    const isProd = import.meta.env.PROD;
+    const isProd = import.meta.env.MODE === 'prod';
 
     if (!isProd) return;
 
@@ -163,9 +162,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   }
 
   // cache theme settings when page is closed or refreshed
-  useEventListener(window, 'beforeunload', () => {
-    cacheThemeSettings();
-  });
+  // useEventListener(window, 'beforeunload', () => {
+  //   cacheThemeSettings();
+  // });
 
   // watch store
   scope.run(() => {
@@ -196,6 +195,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       },
       { immediate: true }
     );
+
+    // cache theme settings when settings change
+    watch(
+      settings,
+      () => {
+        cacheThemeSettings();
+      },
+      { deep: true }
+    );
   });
 
   /** On scope dispose */

src/store/modules/theme/shared.ts

@@ -1,14 +1,14 @@
 import { defu } from 'defu';
 import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
-import { overrideThemeSettings, themeSettings } from '@/theme/settings';
-import { themeVars } from '@/theme/vars';
+import { DARK_CLASS } from '@/constants/app';
 import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';
-import { DARK_CLASS } from '@/constants/app';
+import { overrideThemeSettings, themeSettings } from '@/theme/settings';
+import { themeVars } from '@/theme/vars';
 
 /** Init theme settings */
 export function initThemeSettings() {
-  const isProd = import.meta.env.PROD;
+  const isProd = import.meta.env.MODE === 'prod';
 
   // if it is development mode, the theme settings will not be cached, by update `themeSettings` in `src/theme/settings.ts` to update theme settings
   if (!isProd) return themeSettings;