diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 85a98a5..f252431 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -23,33 +23,24 @@
 </button>
 
 <script is:inline>
-  const theme = (() => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
-      return localStorage.getItem("theme") ?? "light";
-    }
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "light";
-  })();
-
-  if (theme === "light") {
-    document.documentElement.classList.remove("dark");
-  } else {
-    document.documentElement.classList.add("dark");
-  }
-
-  window.localStorage.setItem("theme", theme);
-
+  // Theme toggle functionality - works with the flash prevention script in Layout
   const handleToggleClick = () => {
     const element = document.documentElement;
     element.classList.toggle("dark");
 
     const isDark = element.classList.contains("dark");
     localStorage.setItem("theme", isDark ? "dark" : "light");
+    
+    // Dispatch a custom event that other components can listen for
+    window.dispatchEvent(new CustomEvent('theme-changed', { 
+      detail: { theme: isDark ? 'dark' : 'light' } 
+    }));
   };
 
-  document
-    .getElementById("themeToggle")
-    ?.addEventListener("click", handleToggleClick);
+  // Add event listener when the DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    document
+      .getElementById("themeToggle")
+      ?.addEventListener("click", handleToggleClick);
+  });
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e026ec7..f0a20d7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -8,6 +8,35 @@ import "../styles/global.css";
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Theme flash prevention script - must be first in head -->
+    <script is:inline>
+      // Immediately apply the saved theme to prevent flash
+      (function() {
+        function getThemePreference() {
+          if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+            return localStorage.getItem('theme');
+          }
+          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        
+        const theme = getThemePreference();
+        
+        // Apply theme immediately to prevent flash
+        if (theme === 'dark') {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+        
+        // Store the theme in localStorage for future visits
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem('theme', theme);
+        }
+        
+        // Add a class to indicate JS is loaded and theme is applied
+        document.documentElement.classList.add('theme-loaded');
+      })();
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/pixel_avatar.png" />
diff --git a/src/styles/global.css b/src/styles/global.css
index e820d92..e73557b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,6 +3,16 @@
 
 @variant dark (&:where(.dark, .dark *));
 
+/* Prevent theme flash by hiding content until theme is applied */
+html:not(.theme-loaded) body {
+  display: none;
+}
+
+/* Ensure smooth transitions between themes */
+html.theme-loaded body {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
 @font-face {
   font-family: "Literata Variable";
   font-style: normal;
