From 5de0494538160a7457d1c54543ef533226bd81e9 Mon Sep 17 00:00:00 2001
From: jokin <jokin613@foxmail.com>
Date: Sun, 7 Jan 2024 22:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=A2=98=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/components/ThemeSwitcher.vue        | 30 +++++++++++--------
 src/App.vue                                   | 10 +++++--
 .../components/NavbarThemeSwitcher.vue        |  4 +++
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/@core/components/ThemeSwitcher.vue b/src/@core/components/ThemeSwitcher.vue
index fe6103b7..6d2e8ec1 100644
--- a/src/@core/components/ThemeSwitcher.vue
+++ b/src/@core/components/ThemeSwitcher.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useTheme } from 'vuetify'
 import type { ThemeSwitcherTheme } from '@layouts/types'
 
@@ -20,26 +20,30 @@ const {
   { initialValue: savedTheme.value },
 )
 
-function changeTheme() {
-  const nextTheme = getNextThemeName()
-
-  globalTheme.name.value = nextTheme
-  savedTheme.value = nextTheme
-  localStorage.setItem('theme', nextTheme)
+function updateTheme() {
+  const autoTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
+  globalTheme.name.value = theme
+  savedTheme.value = theme
   // 修改载入时背景色
   localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
-
   themeTransition()
 }
 
-// Update icon if theme is changed from other sources
+// 监听系统主题变化
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+
 watch(
-  () => globalTheme.name.value,
-  (val) => {
-    currentThemeName.value = val
-  },
+  () => currentThemeName.value,
+  () => updateTheme(),
 )
 
+function changeTheme() {
+  const nextTheme = getNextThemeName()
+  currentThemeName.value = nextTheme
+  localStorage.setItem('theme', nextTheme)
+}
+
 // Apply saved theme on page load
 // onMounted(() => {
 //   globalTheme.name.value = savedTheme.value
diff --git a/src/App.vue b/src/App.vue
index e834d2d6..2b6d653d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,15 @@ import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
 import store from './store'
 
+function setTheme() {
+  const { global: globalTheme } = useTheme()
+  let theme = localStorage.getItem('theme') || 'light'
+  if (theme === 'auto')
+    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  globalTheme.name.value = theme
+}
 // 第一时间应用主题
-const { global: globalTheme } = useTheme()
-globalTheme.name.value = localStorage.getItem('theme') || 'light'
+setTheme()
 
 // 提示框
 const $toast = useToast()
diff --git a/src/layouts/components/NavbarThemeSwitcher.vue b/src/layouts/components/NavbarThemeSwitcher.vue
index 86ce7ad6..8b5e7998 100644
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -14,6 +14,10 @@ const themes: ThemeSwitcherTheme[] = [
     name: 'purple',
     icon: 'mdi-brightness-4',
   },
+  {
+    name: 'auto',
+    icon: 'mdi-brightness-auto',
+  },
 ]
 </script>