misc

public/scripts/nav-controls.js

@@ -5,6 +5,15 @@
   window.toggleTheme = () => {
     const currentTheme = document.documentElement.getAttribute("data-theme");
     const newTheme = currentTheme === "dark" ? "light" : "dark";
+    
+    // Toggle the dark class for Tailwind
+    if (newTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    
+    // Dispatch event for astro-themes and other listeners
     document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
   };
 
@@ -80,5 +89,7 @@
     ready();
   }
 
+  // Support both original and obfuscated event names
   document.addEventListener("astro:page-load", initMobileMenu);
+  document.addEventListener("c:ready", initMobileMenu);
 })();

public/scripts/theme-init.js

@@ -0,0 +1,95 @@
+/**
+ * Theme initialization script - must run before page renders
+ * This prevents flash of wrong theme colors
+ * 
+ * Replaces astro-themes functionality with external file to reduce HTML size
+ */
+(function() {
+  var d = document.documentElement;
+  var stored = localStorage.getItem('theme');
+  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var isDark = stored === 'dark' || (!stored && prefersDark);
+  var theme = isDark ? 'dark' : 'light';
+  
+  // Set theme immediately
+  d.setAttribute('data-theme', theme);
+  d.style.colorScheme = theme;
+  if (isDark) {
+    d.classList.add('dark');
+  } else {
+    d.classList.remove('dark');
+  }
+  
+  // Mark ready when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      d.classList.add('ready');
+    });
+  } else {
+    d.classList.add('ready');
+  }
+  
+  // Handle theme changes from other tabs
+  window.addEventListener('storage', function(e) {
+    if (e.key === 'theme') {
+      var newTheme = e.newValue || (prefersDark ? 'dark' : 'light');
+      d.setAttribute('data-theme', newTheme);
+      d.style.colorScheme = newTheme;
+      if (newTheme === 'dark') {
+        d.classList.add('dark');
+      } else {
+        d.classList.remove('dark');
+      }
+    }
+  });
+  
+  // Handle system preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+    if (!localStorage.getItem('theme')) {
+      var newTheme = this.matches ? 'dark' : 'light';
+      d.setAttribute('data-theme', newTheme);
+      d.style.colorScheme = newTheme;
+      if (newTheme === 'dark') {
+        d.classList.add('dark');
+      } else {
+        d.classList.remove('dark');
+      }
+    }
+  });
+  
+  // Handle set-theme custom event (for toggle button)
+  document.addEventListener('set-theme', function(e) {
+    var newTheme = e.detail;
+    if (newTheme) {
+      localStorage.setItem('theme', newTheme);
+    } else {
+      localStorage.removeItem('theme');
+      newTheme = prefersDark ? 'dark' : 'light';
+    }
+    d.setAttribute('data-theme', newTheme);
+    d.style.colorScheme = newTheme;
+    if (newTheme === 'dark') {
+      d.classList.add('dark');
+    } else {
+      d.classList.remove('dark');
+    }
+  });
+  
+  // Re-apply theme after client-side navigation
+  // Support both original and obfuscated event names
+  var swapHandler = function() {
+    var s = localStorage.getItem('theme');
+    var pDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var t = s || (pDark ? 'dark' : 'light');
+    d.setAttribute('data-theme', t);
+    d.style.colorScheme = t;
+    if (t === 'dark') {
+      d.classList.add('dark');
+    } else {
+      d.classList.remove('dark');
+    }
+    d.classList.add('ready');
+  };
+  document.addEventListener('astro:after-swap', swapHandler);
+  document.addEventListener('c:swap', swapHandler);
+})();