From a24fb8e8ad0a26322ab844afa9b794a185a45b14 Mon Sep 17 00:00:00 2001
From: Harry-zklcdc <zklcdc@qq.com>
Date: Mon, 17 Mar 2025 13:39:20 +0800
Subject: [PATCH] =?UTF-8?q?[Feat]=20=E2=9C=A8=20Add=20Auto=20Dark=20Mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layout/composables/layout.js | 43 ++++++++++++++---------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/frontend/src/layout/composables/layout.js b/frontend/src/layout/composables/layout.js
index d8a4cef..e7fe067 100644
--- a/frontend/src/layout/composables/layout.js
+++ b/frontend/src/layout/composables/layout.js
@@ -4,10 +4,36 @@ const layoutConfig = reactive({
   preset: 'Aura',
   primary: 'blue',
   surface: null,
-  darkTheme: false,
+  darkTheme: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
   menuMode: 'static'
 });
 
+// Listen for changes to the prefers-color-scheme media query
+if (window.matchMedia) {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    layoutConfig.darkTheme = e.matches;
+    toggleDarkMode();
+  });
+}
+
+const toggleDarkMode = () => {
+  if (!document.startViewTransition) {
+    executeDarkModeToggle();
+    return;
+  }
+
+  document.startViewTransition(() => executeDarkModeToggle(event));
+};
+
+if (layoutConfig.darkTheme) {
+  toggleDarkMode()
+}
+
+const executeDarkModeToggle = () => {
+  layoutConfig.darkTheme = !layoutConfig.darkTheme;
+  document.documentElement.classList.toggle('app-dark');
+};
+
 const layoutState = reactive({
   staticMenuDesktopInactive: false,
   overlayMenuActive: false,
@@ -39,21 +65,6 @@ export function useLayout() {
     layoutConfig.menuMode = mode;
   };
 
-  const toggleDarkMode = () => {
-    if (!document.startViewTransition) {
-      executeDarkModeToggle();
-
-      return;
-    }
-
-    document.startViewTransition(() => executeDarkModeToggle(event));
-  };
-
-  const executeDarkModeToggle = () => {
-    layoutConfig.darkTheme = !layoutConfig.darkTheme;
-    document.documentElement.classList.toggle('app-dark');
-  };
-
   const onMenuToggle = () => {
     if (layoutConfig.menuMode === 'overlay') {
       layoutState.overlayMenuActive = !layoutState.overlayMenuActive;