From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 20 Aug 2021 12:18:39 +0000 (+0200)
Subject: docs: fix usedark usage
X-Git-Tag: @pinia/nuxt@0.0.2~46
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=de394fe3d0c3910f53af49d72270f6f98ba0a6e3;p=thirdparty%2Fvuejs%2Fpinia.git

docs: fix usedark usage
---

diff --git a/packages/docs/.vitepress/components/HomeSponsors.vue b/packages/docs/.vitepress/components/HomeSponsors.vue
index 0306730e..bd48c76c 100644
--- 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 d7e77b8c..1b83a216 100644
--- 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 434702a6..87350abb 100644
--- 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 05b4bba4..40c8a210 100644
--- 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 ddb8112b..9aa2d988 100644
--- 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',
-})
+}