From 45b0b5d0d02d1fb78dc8340d39dbd16bcddaebed Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Sat, 3 Feb 2024 16:27:12 +0800
Subject: [PATCH] chore: apply to dock.vue

---
 src/components/Dock/Dock.vue                  | 23 +++++++++++--------
 .../RightSideButtons/RightSideButtons.vue     |  1 -
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 0c8901f5..bf845cf3 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
+import { usePreferredDark } from '@vueuse/core'
 import type { CurrentDockItem, HoveringDockItem } from './types'
 import type { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
@@ -32,11 +33,14 @@ const tooltipPlacement = computed(() => {
   return 'right'
 })
 
+const isPreferredDark = usePreferredDark()
+const currentSystemColorScheme = computed(() => isPreferredDark.value ? 'dark' : 'light')
+
 const currentAppColorScheme = computed((): 'dark' | 'light' => {
   if (settings.value.theme !== 'auto')
     return settings.value.theme
   else
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    return currentSystemColorScheme.value
 })
 
 const currentDockItems = computed((): CurrentDockItem[] => {
@@ -85,15 +89,19 @@ onMounted(() => {
 })
 
 function toggleDark(e: MouseEvent) {
+  const updateThemeSettings = () => {
+    if (currentAppColorScheme.value !== currentSystemColorScheme.value)
+      settings.value.theme = 'auto'
+    else
+      settings.value.theme = isPreferredDark.value ? 'light' : 'dark'
+  }
+
   const isAppearanceTransition = typeof document !== 'undefined'
   // @ts-expect-error: Transition API
     && document.startViewTransition
     && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   if (!isAppearanceTransition) {
-    if (currentAppColorScheme.value === 'light')
-      settings.value.theme = 'dark'
-    else
-      settings.value.theme = 'light'
+    updateThemeSettings()
   }
   else {
     const x = e.clientX
@@ -121,10 +129,7 @@ function toggleDark(e: MouseEvent) {
 
     // @ts-expect-error: Transition API
     const transition = document.startViewTransition(async () => {
-      if (currentAppColorScheme.value === 'light')
-        settings.value.theme = 'dark'
-      else
-        settings.value.theme = 'light'
+      updateThemeSettings()
       await nextTick()
     })
 
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 3985e227..871af575 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { usePreferredDark } from '@vueuse/core'
 import type { HoveringDockItem } from './types'
 import { settings } from '~/logic'