From c133f39b5e0034e43f27110bead677c6232038d2 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 30 May 2024 15:17:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=88=87=E6=8D=A2=E5=A4=B1=E8=B4=A5=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#5218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/use-theme.ts            |  4 ++++
 frontend/src/utils/xpack.ts                |  4 ++--
 frontend/src/views/setting/panel/index.vue | 19 ++++++-------------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/hooks/use-theme.ts b/frontend/src/hooks/use-theme.ts
index 431fa345d..8c0cf7e5d 100644
--- a/frontend/src/hooks/use-theme.ts
+++ b/frontend/src/hooks/use-theme.ts
@@ -8,6 +8,10 @@ export const useTheme = () => {
             body.setAttribute('class', 'dark-gold');
             return;
         }
+        if (globalStore.themeConfig.theme === 'auto') {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+            globalStore.themeConfig.theme = prefersDark.matches ? 'dark' : 'light';
+        }
         const body = document.documentElement as HTMLElement;
         if (globalStore.themeConfig.theme === 'dark') body.setAttribute('class', 'dark');
         else body.setAttribute('class', '');
diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts
index da1c77a4f..65dc24344 100644
--- a/frontend/src/utils/xpack.ts
+++ b/frontend/src/utils/xpack.ts
@@ -28,8 +28,8 @@ export async function getXpackSetting() {
     return res;
 }
 
-export async function updateXpackSetting(fromData: FormData) {
+export async function updateXpackSettingByKey(key: string, value: string) {
     const searchXSettingGlob = import.meta.glob('xpack/api/modules/setting.ts');
     const module = await searchXSettingGlob?.['../xpack/api/modules/setting.ts']?.();
-    return module?.updateXSetting(fromData);
+    return module?.updateXSettingByKey(key, value);
 }
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 584d82d6f..3849e312a 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -184,7 +184,7 @@ import Proxy from '@/views/setting/panel/proxy/index.vue';
 import Network from '@/views/setting/panel/default-network/index.vue';
 import HideMenu from '@/views/setting/panel/hidemenu/index.vue';
 import { storeToRefs } from 'pinia';
-import { getXpackSetting, updateXpackSetting } from '@/utils/xpack';
+import { getXpackSetting, updateXpackSettingByKey } from '@/utils/xpack';
 
 const loading = ref(false);
 const i18n = useI18n();
@@ -357,18 +357,11 @@ const onSave = async (key: string, val: any) => {
             globalStore.themeConfig.theme = val;
         }
         switchTheme();
-        if (isProductPro.value) {
-            let formData = new FormData();
-            formData.append('theme', val);
-            await updateXpackSetting(formData)
-                .then(async () => {
-                    loading.value = false;
-                    MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                    await search();
-                })
-                .catch(() => {
-                    loading.value = false;
-                });
+        updateXpackSettingByKey('Theme', val === 'dark-gold' ? 'dark-gold' : '');
+        if (val === 'dark-gold') {
+            MsgSuccess(i18n.t('commons.msg.operationSuccess'));
+            loading.value = false;
+            search();
             return;
         }
     }