feat(projects): support loading page dark mode adaptation. (#702)

soybeanjs · Jan 26, 2025 · 9b9455d · 9b9455d
1 parent 86da767
commit 9b9455d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/src/constants/app.ts b/src/constants/app.ts
@@ -61,3 +61,5 @@ export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I
 };
 
 export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
+
+export const DARK_CLASS = 'dark';
diff --git a/src/plugins/loading.ts b/src/plugins/loading.ts
@@ -3,14 +3,20 @@ import { getRgb } from '@sa/color';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import systemLogo from '@/assets/svg-icon/logo.svg?raw';
+import { DARK_CLASS } from '@/constants/app';
+import { toggleHtmlClass } from '@/utils/common';
 
 export function setupLoading() {
   const themeColor = localStg.get('themeColor') || '#646cff';
-
+  const darkMode = localStg.get('darkMode') || false;
   const { r, g, b } = getRgb(themeColor);
 
   const primaryColor = `--primary-color: ${r} ${g} ${b}`;
 
+  if (darkMode) {
+    toggleHtmlClass(DARK_CLASS).add();
+  }
+
   const loadingClasses = [
     'left-0 top-0',
     'left-0 bottom-0 animate-delay-500',
@@ -27,14 +33,14 @@ export function setupLoading() {
     .join('\n');
 
   const loading = `
-<div class="fixed-center flex-col" style="${primaryColor}">
+<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
   ${logoWithClass}
   <div class="w-56px h-56px my-36px">
     <div class="relative h-full animate-spin">
       ${dot}
     </div>
   </div>
-  <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
+  <h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
 </div>`;
 
   const app = document.getElementById('app');

diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
@@ -174,6 +174,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       darkMode,
       val => {
         toggleCssDarkMode(val);
+        localStg.set('darkMode', val);
       },
       { immediate: true }
     );

diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
@@ -5,8 +5,7 @@ import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';
-
-const DARK_CLASS = 'dark';
+import { DARK_CLASS } from '@/constants/app';
 
 /** Init theme settings */
 export function initThemeSettings() {

diff --git a/src/typings/storage.d.ts b/src/typings/storage.d.ts
@@ -20,6 +20,8 @@ declare namespace StorageType {
     refreshToken: string;
     /** The theme color */
     themeColor: string;
+    /** The dark mode */
+    darkMode: boolean;
     /** The theme settings */
     themeSettings: App.Theme.ThemeSetting;
     /**
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,3 +61,5 @@ export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I
		};

		export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);

		export const DARK_CLASS = 'dark';