diff --git a/web1/src/composables/useAppDark.js b/web1/src/composables/useAppDark.js
new file mode 100644
index 0000000..86b6766
--- /dev/null
+++ b/web1/src/composables/useAppDark.js
@@ -0,0 +1,14 @@
+import { useDark } from '@vueuse/core'
+
+const darkOptions = {
+  selector: 'html',
+  attribute: 'class',
+  valueDark: 'dark',
+  valueLight: '',
+  storageKey: 'guzhi-color-scheme',
+  initialValue: 'light',
+}
+
+export function useAppDark() {
+  return useDark(darkOptions)
+}
diff --git a/web1/src/layout/components/header/components/ThemeMode.vue b/web1/src/layout/components/header/components/ThemeMode.vue
index 01ce41e..1c1ffcb 100644
--- a/web1/src/layout/components/header/components/ThemeMode.vue
+++ b/web1/src/layout/components/header/components/ThemeMode.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { useAppStore } from '@/store'
-import { useDark, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'
+import { useAppDark } from '@/composables/useAppDark'
 
 const appStore = useAppStore()
-const isDark = useDark()
+const isDark = useAppDark()
 const toggleDark = () => {
   appStore.toggleDark()
   useToggle(isDark)()
diff --git a/web1/src/store/modules/app/index.js b/web1/src/store/modules/app/index.js
index 02dfecd..b0beded 100644
--- a/web1/src/store/modules/app/index.js
+++ b/web1/src/store/modules/app/index.js
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia'
-import { useDark } from '@vueuse/core'
 import { lStorage } from '@/utils'
 import i18n from '~/i18n'
+import { useAppDark } from '@/composables/useAppDark'
 
 const currentLocale = lStorage.get('locale')
 const { locale } = i18n.global
 
-const isDark = useDark()
+const isDark = useAppDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {