docs: fix usedark usage

diff --git a/packages/docs/.vitepress/components/HomeSponsors.vue b/packages/docs/.vitepress/components/HomeSponsors.vue
index 0306730efe2b9e329b7f2521f24593035dd826cc..bd48c76ce02c3ef47a8bb72a400303d62481f2ab 100644 (file)
--- a/packages/docs/.vitepress/components/HomeSponsors.vue
+++ b/packages/docs/.vitepress/components/HomeSponsors.vue
@@ -20,7 +20,10 @@
 import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
 import { nextTick, onMounted } from 'vue'
-import { isDark } from '../theme/dark-theme'
+import { darkStorageConfig } from '../theme/dark-theme'
+import { useDark } from '@vueuse/core'
+
+const isDark = useDark(darkStorageConfig)
 
 onMounted(() => {
   // wait to ticks to fix the problem of SSR with no color scheme

diff --git a/packages/docs/.vitepress/components/HomeSponsorsGroup.vue b/packages/docs/.vitepress/components/HomeSponsorsGroup.vue
index d7e77b8c6c0f40ad51e2192e58b5fe12b1e57e12..1b83a216404bee2f54813bfa2a50e4751e3ed5c4 100644 (file)
--- a/packages/docs/.vitepress/components/HomeSponsorsGroup.vue
+++ b/packages/docs/.vitepress/components/HomeSponsorsGroup.vue
@@ -31,9 +31,12 @@
 
 <script setup lang="ts">
 import sponsors from './sponsors.json'
-import { isDark } from '../theme/dark-theme'
 import { computed } from 'vue'
 import type { PropType } from 'vue'
+import { darkStorageConfig } from '../theme/dark-theme'
+import { useDark } from '@vueuse/core'
+
+const isDark = useDark(darkStorageConfig)
 
 const props = defineProps({
   name: {

diff --git a/packages/docs/.vitepress/components/ThemeToggle.vue b/packages/docs/.vitepress/components/ThemeToggle.vue
index 434702a60bea08773be7b1d9a6273f57504597c9..87350abb83c372b4fd8c2f477f6a2cb3afb2939e 100644 (file)
--- a/packages/docs/.vitepress/components/ThemeToggle.vue
+++ b/packages/docs/.vitepress/components/ThemeToggle.vue
@@ -58,7 +58,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { isDark } from '../theme/dark-theme'
+import { darkStorageConfig } from '../theme/dark-theme'
+import { useDark } from '@vueuse/core'
+
+const isDark = useDark(darkStorageConfig)
 
 const label = computed(() =>
   isDark.value ? 'Switch to light mode' : 'Switch to dark mode'

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 05b4bba4790a6016ac8ca7dc218fb1956c6c25f4..40c8a210df4076b35fcb87b3d184d76681874802 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -3,10 +3,12 @@ import { h, nextTick } from 'vue'
 import type { FunctionalComponent } from 'vue'
 import sponsors from '../components/sponsors.json'
 import './sponsors.css'
-import { isDark } from './dark-theme'
+import { darkStorageConfig } from '../theme/dark-theme'
+import { useDark } from '@vueuse/core'
 
-export const Layout: FunctionalComponent = () =>
-  h(
+export const Layout: FunctionalComponent = () => {
+  const isDark = useDark(darkStorageConfig)
+  return h(
     Theme.Layout,
     {
       onVnodeMounted() {
@@ -45,5 +47,6 @@ export const Layout: FunctionalComponent = () =>
         ]),
     }
   )
+}
 
 Layout.displayName = 'CustomLayout'

diff --git a/packages/docs/.vitepress/theme/dark-theme.ts b/packages/docs/.vitepress/theme/dark-theme.ts
index ddb8112bf6faf0ac72c6bc0143b9bd89a937db4d..9aa2d98898b2fde1ea01cf25b16c82fc18d118d2 100644 (file)
--- a/packages/docs/.vitepress/theme/dark-theme.ts
+++ b/packages/docs/.vitepress/theme/dark-theme.ts
@@ -1,6 +1,6 @@
-import { useDark } from '@vueuse/core'
+import type { UseDarkOptions } from '@vueuse/core'
 
-export const isDark = useDark({
+export const darkStorageConfig: UseDarkOptions = {
   storageKey: 'pinia-color-scheme',
   valueLight: 'light',
-})
+}