From 82089563e4bd6b7a1896c5f067a01e2e29f0ea82 Mon Sep 17 00:00:00 2001
From: star knight <64941905+starknt@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:25:48 +0800
Subject: [PATCH] feat: follow system theme (#403)

---
 packages/gui/src/view/App.vue              | 13 ++++++++++--
 packages/gui/src/view/composables/theme.js |  3 +++
 packages/gui/src/view/pages/setting.vue    | 23 +++++++++++-----------
 3 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 packages/gui/src/view/composables/theme.js

diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index e58fb9365a..bf54a31c5b 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -1,6 +1,7 @@
 <script>
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import { colorTheme } from './composables/theme'
 
 export default {
   name: 'App',
@@ -16,12 +17,20 @@ export default {
   },
   computed: {
     themeClass () {
-      return `theme-${this.config.app.theme}`
+      return `theme-${colorTheme.value}`
     },
     theme () {
-      return this.config.app.theme
+      return colorTheme.value
     },
   },
+  mounted () {
+    let theme = this.config.app.theme
+    if (this.config.app.theme === 'system') {
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    colorTheme.value = theme
+  },
   created () {
     this.menus = createMenus(this)
     this.config = this.$global.config
diff --git a/packages/gui/src/view/composables/theme.js b/packages/gui/src/view/composables/theme.js
new file mode 100644
index 0000000000..c5962619cd
--- /dev/null
+++ b/packages/gui/src/view/composables/theme.js
@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const colorTheme = ref('dark')
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 607c0f90ed..f3279fe34f 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -1,6 +1,7 @@
 <script>
 import { ipcRenderer } from 'electron'
 import Plugin from '../mixins/plugin'
+import { colorTheme } from '../composables/theme'
 
 export default {
   name: 'Setting',
@@ -10,19 +11,12 @@ export default {
       key: 'app',
       removeUserConfigLoading: false,
       reloadLoading: false,
-      themeBackup: null,
       urlBackup: null,
       personalUrlBackup: null,
     }
   },
-  created () {
-
-  },
-  mounted () {
-  },
   methods: {
     ready (config) {
-      this.themeBackup = config.app.theme
       this.urlBackup = config.app.remoteConfig.url
       this.personalUrlBackup = config.app.remoteConfig.personalUrl
     },
@@ -187,15 +181,17 @@ export default {
     async applyAfter () {
       let reloadLazy = 10
 
+      let theme = this.config.app.theme
+      if (theme === 'system') {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      }
+      colorTheme.value = theme
+
       // 判断远程配置地址是否变更过，如果是则重载远程配置并重启服务
       if (this.config.app.remoteConfig.url !== this.urlBackup || this.config.app.remoteConfig.personalUrl !== this.personalUrlBackup) {
         await this.$api.config.downloadRemoteConfig()
         await this.reloadConfigAndRestart()
         reloadLazy = 300
-      }
-
-      // 判断是否切换了主题，如果是，则刷新页面
-      if (this.config.app.theme !== this.themeBackup) {
         setTimeout(() => window.location.reload(), reloadLazy)
       }
 
@@ -264,7 +260,7 @@ export default {
       this.$confirm({
         title: '确定要恢复出厂设置吗？',
         width: 610,
-        content: (h) => (
+        content: h => (
           <div class="restore-factory-settings">
             <hr />
             <p>
@@ -376,6 +372,9 @@ export default {
           <a-radio-button value="dark" title="dark">
             暗色
           </a-radio-button>
+          <a-radio-button value="system" title="system">
+            跟随系统
+          </a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">