Fixed theme switching bug related to page transitions.

midudev · Apr 7, 2024 · eb78541 · eb78541
1 parent 094032d
commit eb78541
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -8,6 +8,7 @@ const THEMES = ["Light", "Dark", "System"]
 
 <div class="relative ml-1 mr-1">
   <button
+    transition:persist
     id="theme-toggle-btn"
     class="appearance-none border-none flex hover:scale-125 transition"
   >
@@ -23,6 +24,7 @@ const THEMES = ["Light", "Dark", "System"]
     />
   </button>
   <div
+    transition:persist
     id="themes-menu"
     class="absolute hidden scale-80 top-8 right-0 text-sm p-1 min-w-[8rem] rounded-md border border-gray-100 bg-white/90 dark:bg-gray-900/90 dark:border-gray-500/20 shadow-[0_3px_10px_rgb(0,0,0,0.2)] backdrop-blur-md"
   >
@@ -112,4 +114,9 @@ const THEMES = ["Light", "Dark", "System"]
       updateTheme()
     })
   })
+
+  document.addEventListener('astro:after-swap', () => {
+    updateTheme();
+    window.scrollTo({ left: 0, top: 0, behavior: 'instant' });
+  })
 </script>