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