From f16c6ebd13db049475cfa57e0996691ede725d11 Mon Sep 17 00:00:00 2001
From: liwakin <liwakin@qq.com>
Date: Fri, 6 Dec 2024 18:23:45 +0800
Subject: [PATCH] fix: fix the existence of multiple isDark variables in an app

---
 src/core/components/VTSwitchAppearance.vue | 39 +-------------------
 src/core/composables/SwitchAppearance.ts   | 43 ++++++++++++++++++++++
 2 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/core/composables/SwitchAppearance.ts

diff --git a/src/core/components/VTSwitchAppearance.vue b/src/core/components/VTSwitchAppearance.vue
index 820f58a..67f7977 100644
--- a/src/core/components/VTSwitchAppearance.vue
+++ b/src/core/components/VTSwitchAppearance.vue
@@ -1,48 +1,13 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import VTSwitch from './VTSwitch.vue'
 import VTIconSun from './icons/VTIconSun.vue'
 import VTIconMoon from './icons/VTIconMoon.vue'
 import { useConfig } from '../../vitepress/composables/config'
+import { useSwitchAppearance } from '../composables/SwitchAppearance'
 
 const { config } = useConfig()
 
-const storageKey = 'vitepress-theme-appearance'
-const { isDark, toggle } = typeof localStorage !== 'undefined'
-  ? useAppearance()
-  : { isDark: false, toggle: () => {}}
-
-function useAppearance() {
-  let userPreference = localStorage.getItem(storageKey) || 'auto'
-  const query = window.matchMedia(`(prefers-color-scheme: dark)`)
-  const classList = document.documentElement.classList
-  const isDark = ref(
-    userPreference === 'auto' ? query.matches : userPreference === 'dark'
-  )
-  const setClass = (dark: boolean) => classList[dark ? 'add' : 'remove']('dark')
-
-  query.onchange = (e) => {
-    if (userPreference === 'auto') {
-      setClass((isDark.value = e.matches))
-    }
-  }
-
-  const toggle = () => {
-    setClass((isDark.value = !isDark.value))
-    localStorage.setItem(
-      storageKey,
-      (userPreference = isDark.value
-        ? query.matches
-          ? 'auto'
-          : 'dark'
-        : query.matches
-        ? 'light'
-        : 'auto')
-    )
-  }
-
-  return { isDark, toggle }
-}
+const { isDark, toggle } = useSwitchAppearance()
 </script>
 
 <template>
diff --git a/src/core/composables/SwitchAppearance.ts b/src/core/composables/SwitchAppearance.ts
new file mode 100644
index 0000000..8cb2aaf
--- /dev/null
+++ b/src/core/composables/SwitchAppearance.ts
@@ -0,0 +1,43 @@
+import { ref } from 'vue'
+
+export function useSwitchAppearance() {
+  return { isDark, toggle }
+}
+
+const storageKey = 'vitepress-theme-appearance'
+const { isDark, toggle } =
+  typeof localStorage !== 'undefined'
+    ? useAppearance()
+    : { isDark: false, toggle: () => {} }
+
+function useAppearance() {
+  let userPreference = localStorage.getItem(storageKey) || 'auto'
+  const query = window.matchMedia(`(prefers-color-scheme: dark)`)
+  const classList = document.documentElement.classList
+  const isDark = ref(
+    userPreference === 'auto' ? query.matches : userPreference === 'dark'
+  )
+  const setClass = (dark: boolean) => classList[dark ? 'add' : 'remove']('dark')
+
+  query.onchange = (e) => {
+    if (userPreference === 'auto') {
+      setClass((isDark.value = e.matches))
+    }
+  }
+
+  const toggle = () => {
+    setClass((isDark.value = !isDark.value))
+    localStorage.setItem(
+      storageKey,
+      (userPreference = isDark.value
+        ? query.matches
+          ? 'auto'
+          : 'dark'
+        : query.matches
+          ? 'light'
+          : 'auto')
+    )
+  }
+
+  return { isDark, toggle }
+}