add astro native SPA transition

src/components/Background.astro

@@ -29,7 +29,7 @@
 
 <script>
   // Theme transition script
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const themeToggle = document.querySelector('[data-theme-toggle]');
     const overlay = document.getElementById('theme-transition-overlay');
 

src/components/Footer.astro

@@ -35,6 +35,7 @@ const socialLinks = [
 
 <footer
   class="theme-transition-all relative mt-20 overflow-hidden border-t border-zinc-100 dark:border-zinc-800"
+  transition:animate="none"
 >
   <div class="pointer-events-none absolute inset-0 overflow-hidden">
     <div

src/components/Navigation.astro

@@ -20,6 +20,7 @@ const currentPath = pathname.slice(1);
 
 <header
   class="fixed top-0 right-0 left-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
+  transition:animate="none"
 >
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
     <!-- Logo -->
@@ -121,7 +122,7 @@ const currentPath = pathname.slice(1);
 
 <script>
   // Mobile menu toggle with animations
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const mobileMenuButton = document.getElementById('mobile-menu-button');
     const closeMenuButton = document.getElementById('close-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');

src/components/ThemeToggle.astro

@@ -47,6 +47,20 @@
   ></span>
 </button>
 
+<script is:inline>
+  // Use a function to persist theme when using SPA transitions
+  // https://docs.astro.build/en/guides/view-transitions/#script-re-execution
+  function applyTheme() {
+    localStorage.theme === 'dark'
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark');
+  }
+
+  document.addEventListener('astro:after-swap', applyTheme);
+
+  applyTheme();
+</script>
+
 <script>
   // Use a function to handle theme toggle to ensure it can be called from anywhere
   function setupThemeToggle() {
@@ -171,7 +185,7 @@
   }
 
   // Run setup on load
-  document.addEventListener('DOMContentLoaded', setupThemeToggle);
+  document.addEventListener('astro:page-load', setupThemeToggle);
 
   // Also run on page visibility change to ensure theme is consistent
   document.addEventListener('visibilitychange', () => {