From f5a099e543c502a40d6785bc02e3fdfb7bc4fa45 Mon Sep 17 00:00:00 2001
From: yizhankui <2669587581@qq.com>
Date: Sun, 12 Feb 2023 13:42:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(DarkToggle):=20=E5=AF=B9=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/Uno/DarkToggle.vue | 37 +++++++++++++++-----------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/components/Uno/DarkToggle.vue b/frontend/components/Uno/DarkToggle.vue
index 76c5a91..e23a75a 100644
--- a/frontend/components/Uno/DarkToggle.vue
+++ b/frontend/components/Uno/DarkToggle.vue
@@ -4,6 +4,7 @@ const color = useColorMode()
 function toggleDark() {
   color.preference = color.value === 'dark' ? 'light' : 'dark'
 }
+
 if (process.client) {
   const item = localStorage.getItem('nuxt-color-mode') || 'dark'
   localStorage.setItem('nuxt-color-mode', item)
@@ -19,31 +20,35 @@ if (process.client) {
   // 先获取media
   const media = window.matchMedia('(prefers-color-scheme:dark)')
   // 判断是否为暗主题
-  if (media.matches) {
-    // 如果是暗色主题则使用localStorage储存的上次使用的主题颜色
+  if (media.matches)
+  // 如果是暗色主题则使用localStorage储存的上次使用的主题颜色
     setItem()
-  }
 
-  onMounted(() => {
   // 上面操作只会在页面加载时才会生效，因此，需要给media添加事件监听器
-    media.addEventListener('change', (e) => {
-      if (e.matches)
-        setDark()
-      else
-        setLight()
-    })
+  // MediaQueryList的maches属性会返回媒体查询的结果
+  function handleColorChange(e: MediaQueryListEvent) {
+    if (e.matches)
+      setDark()
+    else
+      setLight()
+  }
 
-    window.addEventListener('storage', (e) => {
+  function handleStorageChange(e: StorageEvent) {
+    if (e.key === 'nuxt-color-mode' && typeof e.newValue === 'string') {
       if (e.newValue === 'light')
         setLight()
-
-      else
+      else if (e.newValue === 'dark')
         setDark()
-    })
+    }
+  }
+
+  onMounted(() => {
+    media.addEventListener('change', handleColorChange)
+    window.addEventListener('storage', handleStorageChange)
   })
   onUnmounted(() => {
-    media.removeEventListener('change', (e) => {}, true)
-    window.removeEventListener('storage', (e) => {}, true)
+    media.removeEventListener('change', handleColorChange)
+    window.removeEventListener('storage', handleStorageChange)
   })
 }
 </script>