From 61802bc235a19eba4f79297ee66fcb52ec157dd2 Mon Sep 17 00:00:00 2001
From: Azir <2075125282@qq.com>
Date: Sat, 25 Jan 2025 20:10:00 +0800
Subject: [PATCH] feat(projects): support loading page dark mode adaptation.

---
 src/constants/app.ts              |  2 ++
 src/plugins/loading.ts            | 12 +++++++++---
 src/store/modules/theme/index.ts  |  1 +
 src/store/modules/theme/shared.ts |  3 +--
 src/typings/storage.d.ts          |  2 ++
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/constants/app.ts b/src/constants/app.ts
index 3757a4e89..4767c4799 100644
--- 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
index f5c79a24c..c697e3372 100644
--- 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
index a1a39a01b..6964fbfe6 100644
--- 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
index b47562888..1a2d14639 100644
--- 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
index 0d52f33c5..02668fcc7 100644
--- 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;
     /**