From dac95374750c9efb42bd5e0f6d0a94ec40b52059 Mon Sep 17 00:00:00 2001
From: Whbbit1999 <60510247+Whbbit1999@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:46:30 +0800
Subject: [PATCH] fix: Switching pages will flash

---
 src/components/ThemeToggle.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index 31b6442..257a31e 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -1,10 +1,27 @@
 <script lang="ts" setup>
 import { useDark, useToggle } from '@vueuse/core'
+import { onMounted, watchEffect } from 'vue'
 
 const isDark = useDark()
 
 const toggleDark = useToggle(isDark)
 
+watchEffect(() => {
+  if (isDark.value) {
+    setDarkMode(document)
+  }
+})
+
+function setDarkMode(document: Document) {
+  if (isDark.value)
+    document.documentElement.classList.add('dark')
+}
+onMounted(() => {
+  document.addEventListener('astro:before-swap', (event) => {
+    setDarkMode(event.newDocument)
+  })
+})
+
 function toggleTheme(event: MouseEvent) {
   const x = event.clientX
   const y = event.clientY