diff --git a/src/components/ui/CopyCode.astro b/src/components/ui/CopyCode.astro
index 0c0be7b..5a79640 100644
--- a/src/components/ui/CopyCode.astro
+++ b/src/components/ui/CopyCode.astro
@@ -17,7 +17,7 @@ import { themeConfig } from '@/config'
       </svg>
     `
 
-    document.documentElement.setAttribute('data-copy-code', copyCode ? 'enabled' : 'disabled')
+    document.body.setAttribute('data-copy-code', copyCode ? 'enabled' : 'disabled')
 
     if (!copyCode) {
       return
@@ -147,7 +147,7 @@ import { themeConfig } from '@/config'
     pointer-events: none;
   }
 
-  [data-copy-code='disabled'] .copy-button {
+  body[data-copy-code='disabled'] .copy-button {
     display: none !important;
   }
 
diff --git a/src/components/ui/ThemeManager.astro b/src/components/ui/ThemeManager.astro
index 1dccd60..e0a2797 100644
--- a/src/components/ui/ThemeManager.astro
+++ b/src/components/ui/ThemeManager.astro
@@ -1,3 +1,26 @@
+<!--
+  This is a critical style block to prevent flashing on page load in dark mode.
+  It is injected into the <head> of the document before the main stylesheets are loaded.
+-->
+<style is:inline>
+  :root {
+    --bg: #ffffff;
+  }
+
+  html.dark {
+    --bg: #1c1c1c;
+  }
+
+  html {
+    background-color: var(--bg);
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+</style>
+
 <script is:inline>
   // Global Theme Manager
   ;(function () {
@@ -90,33 +113,43 @@
     // Initialize theme manager
     window.ThemeManager.init()
 
-    // Listen for Astro page transition events, but delay execution to avoid conflicts with transition animations
-    document.addEventListener('astro:page-load', () => {
+    // Apply theme when needed
+    const applyTheme = () => {
       if (window.ThemeManager) {
-        // Use requestAnimationFrame to ensure execution in the next frame, avoiding conflicts with transition animations
-        requestAnimationFrame(() => {
-          const currentTheme = window.ThemeManager.getEffectiveTheme()
-          const appliedTheme = document.documentElement.classList.contains('dark')
-            ? 'dark'
-            : 'light'
-
-          // Only reapply theme when there's a mismatch to avoid unnecessary flickering
-          if (currentTheme !== appliedTheme) {
-            window.ThemeManager.applyTheme(currentTheme)
-          }
-        })
+        const theme = window.ThemeManager.getEffectiveTheme()
+        window.ThemeManager.applyTheme(theme)
       }
-    })
+    }
+
+    // Apply immediately on script load
+    applyTheme()
+
+    // Listen for navigation events
+    document.addEventListener('astro:before-preparation', applyTheme)
 
-    // Listen for page transition start event to ensure theme is ready before transition
-    document.addEventListener('astro:before-preparation', () => {
+    // Apply theme after DOM changes (both swap and page load)
+    const applyThemeAfterNavigation = () => {
       if (window.ThemeManager) {
-        const theme = window.ThemeManager.getEffectiveTheme()
-        // Ensure theme class is applied before transition starts
-        if (!document.documentElement.classList.contains(theme)) {
-          document.documentElement.classList.add(theme)
+        const currentTheme = window.ThemeManager.getEffectiveTheme()
+        const appliedTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+
+        if (currentTheme !== appliedTheme) {
+          // Use requestAnimationFrame to ensure theme is applied in the next frame, avoiding conflicts with view transition
+          requestAnimationFrame(() => {
+            window.ThemeManager.applyTheme(currentTheme)
+          })
         }
       }
+    }
+
+    document.addEventListener('astro:after-swap', applyThemeAfterNavigation)
+    document.addEventListener('astro:page-load', applyThemeAfterNavigation)
+
+    // Handle system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (window.ThemeManager && window.ThemeManager.isUsingSystemTheme()) {
+        setTimeout(applyTheme, 0)
+      }
     })
   })()
 </script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 09ed44a..3a8ffa2 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -19,6 +19,7 @@ const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
 
 <html lang={language}>
   <head>
+    <ThemeManager />
     {fadeAnimation && <ClientRouter />}
     <slot name="head" />
   </head>
@@ -29,7 +30,6 @@ const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
       ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
     `}
   >
-    <ThemeManager />
     <FaviconThemeSwitcher />
 
     {