From 365486d85f713aa4a7ebf16a7d7bf1b82c68cff1 Mon Sep 17 00:00:00 2001
From: wing <237613578@qq.com>
Date: Wed, 14 May 2025 06:31:26 +0000
Subject: [PATCH] =?UTF-8?q?update=20src/utils/useDark.ts.=20=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=8A=A5=E9=94=99=EF=BC=9A?=
 =?UTF-8?q?pinia.js=3Fv=3Dbdf4601a:1348=20Uncaught=20(in=20promise)=20Erro?=
 =?UTF-8?q?r:=20[=F0=9F=8D=8D]:=20"getActivePinia()"=20was=20called=20but?=
 =?UTF-8?q?=20there=20was=20no=20active=20Pinia.=20Are=20you=20trying=20to?=
 =?UTF-8?q?=20use=20a=20store=20before=20calling=20"app.use(pinia)"=3F=20?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E4=BD=BF=E7=94=A8=E8=BF=99=E7=A7=8Dhooks?=
 =?UTF-8?q?=E7=9A=84=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: wing <237613578@qq.com>
---
 src/utils/useDark.ts | 88 +++++++++++++++++++++++---------------------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/utils/useDark.ts b/src/utils/useDark.ts
index 937af66..96e5c84 100644
--- a/src/utils/useDark.ts
+++ b/src/utils/useDark.ts
@@ -1,51 +1,57 @@
-import { useDark, useToggle } from '@vueuse/core'
+import { useDark as useDarkCore, useToggle } from '@vueuse/core'
 import useConfig from '@/store/modules/layout'
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const isDark = useDark({
-  onChanged(dark) {
-    nextTick(() => {
-      const config = useConfig()
-      updateHtmlDarkClass(dark)
-      config.setLayout('isDark', dark)
-      config.onSetLayoutColor()
-    })
-  },
-})
+export default function useDark() {
+  const isDark = useDarkCore({
+    onChanged(dark) {
+      nextTick(() => {
+        const config = useConfig()
+        updateHtmlDarkClass(dark)
+        config.setLayout('isDark', dark)
+        config.onSetLayoutColor()
+      })
+    },
+  })
 
-/**
- * 切换暗黑模式
- */
-const toggleDark = useToggle(isDark)
+  /**
+   * 切换暗黑模式
+   */
+  const toggleDark = useToggle(isDark)
 
-/**
- * 切换当前页面的暗黑模式
- */
-export function togglePageDark(val: boolean) {
-  const config = useConfig()
-  const isDark = ref(config.layout.isDark)
-  onMounted(() => {
-    if (isDark.value !== val) updateHtmlDarkClass(val)
-  })
-  onUnmounted(() => {
-    updateHtmlDarkClass(isDark.value)
-  })
-  watch(
-    () => config.layout.isDark,
-    (newVal) => {
-      isDark.value = newVal
+  /**
+   * 切换当前页面的暗黑模式
+   */
+  function togglePageDark(val: boolean) {
+    const config = useConfig()
+    const isDark = ref(config.layout.isDark)
+    onMounted(() => {
       if (isDark.value !== val) updateHtmlDarkClass(val)
+    })
+    onUnmounted(() => {
+      updateHtmlDarkClass(isDark.value)
+    })
+    watch(
+      () => config.layout.isDark,
+      (newVal) => {
+        isDark.value = newVal
+        if (isDark.value !== val) updateHtmlDarkClass(val)
+      }
+    )
+  }
+
+  function updateHtmlDarkClass(val: boolean) {
+    const htmlEl = document.getElementsByTagName('html')[0]
+    if (val) {
+      htmlEl.setAttribute('class', 'dark')
+    } else {
+      htmlEl.setAttribute('class', '')
     }
-  )
-}
+  }
 
-export function updateHtmlDarkClass(val: boolean) {
-  const htmlEl = document.getElementsByTagName('html')[0]
-  if (val) {
-    htmlEl.setAttribute('class', 'dark')
-  } else {
-    htmlEl.setAttribute('class', '')
+  return {
+    isDark,
+    toggleDark,
+    togglePageDark,
   }
 }
-
-export default toggleDark
-- 
Gitee