From fbad895622c46bf2858972d4e4eefec6b9c95a3f Mon Sep 17 00:00:00 2001
From: bsdayo <bsdayo@outlook.com>
Date: Sun, 5 May 2024 02:43:07 +0800
Subject: [PATCH] fix: naive ui theme

---
 .vitepress/theme/Layout.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index e069c04..3955220 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme="isDark ? darkTheme : lightTheme">
+  <n-config-provider :theme="currentTheme">
     <Layout>
       <template #doc-before v-if="currentPost">
         <n-thing class="post-header">
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, watch, onMounted } from 'vue'
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { data as posts } from '../posts.data'
@@ -56,6 +56,8 @@ import DateTag from '../../components/DateTag.vue'
 const { Layout } = DefaultTheme
 const { page, theme, isDark } = useData<ThemeConfig>()
 
+const currentTheme = ref(isDark ? darkTheme : lightTheme)
+
 const taglines: string[] = [
   '<code>(() => &lt;bs moe/&gt;)()</code>',
   "<code>h('bs', { moe: true })</code>",
@@ -96,6 +98,14 @@ function addMediumZoom() {
 }
 
 onMounted(() => {
+  watch(
+    () => isDark.value,
+    (dark) => {
+      currentTheme.value = dark ? darkTheme : lightTheme
+    },
+    { immediate: true }
+  )
+
   import('webfontloader').then((webfont) =>
     webfont.load({
       google: {