diff --git a/src/utils/useDark.ts b/src/utils/useDark.ts
index 937af663eef9bac74e65d00718e7bcecbd699f95..96e5c84858d801d65b881f1de55a771537d01b53 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