diff --git a/frontend/index.html b/frontend/index.html
index eefd45b..4c3f6cd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#e82517" />
+    <style>
+      html { background: #fefde7; }
+      html[data-theme="dark"] { background: #130d08; color-scheme: dark; }
+      html[data-theme="dark"] body,
+      html[data-theme="dark"] #root { background: #130d08; }
+      html[data-theme="light"] { background: #fefde7; color-scheme: light; }
+      html[data-theme="light"] body,
+      html[data-theme="light"] #root { background: #fefde7; }
+    </style>
     <script>
       (() => {
         const cookies = Object.fromEntries(
@@ -28,6 +37,15 @@
           } catch {}
         }
         theme = theme === 'dark' ? 'dark' : 'light'
+        const bg = theme === 'dark' ? '#130d08' : '#fefde7'
+
+        document.documentElement.dataset.theme = theme
+        document.documentElement.style.backgroundColor = bg
+        document.documentElement.style.colorScheme = theme
+        document.querySelector('meta[name="theme-color"]')?.setAttribute(
+          'content',
+          theme === 'dark' ? '#101211' : '#e82517',
+        )
 
         let analyticsPreferences = null
         const serializedPreferences = cookies['tssbot_analytics_preferences']
@@ -38,12 +56,6 @@
         } catch {}
 
         window.__TSS_BOOT_PREFERENCES__ = { analyticsPreferences, theme }
-        document.documentElement.dataset.theme = theme
-        document.documentElement.style.colorScheme = theme
-        document.querySelector('meta[name="theme-color"]')?.setAttribute(
-          'content',
-          theme === 'dark' ? '#101211' : '#e82517',
-        )
       })()
     </script>
     <meta name="tss-turnstile-session" content="__TURNSTILE_SESSION__" />
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4ccf7be..9ffd2d2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -2800,6 +2800,7 @@ function PixelMountains() {
   const skyRef = useRef(null)
   const fadeTimerRef = useRef(null)
   const skyTimerRef = useRef(null)
+  const themeSyncedRef = useRef(false)
 
   function drawCanvas(canvas, theme) {
     if (!canvas || !theme) return
@@ -2825,6 +2826,7 @@ function PixelMountains() {
       const theme = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'
       setActiveTheme((current) => {
         if (theme === current) return current
+        if (!themeSyncedRef.current) return theme
         window.clearTimeout(fadeTimerRef.current)
         window.clearTimeout(skyTimerRef.current)
         setPreviousTheme(current)
@@ -2836,6 +2838,7 @@ function PixelMountains() {
     }
 
     syncTheme()
+    themeSyncedRef.current = true
     const observer = new MutationObserver(syncTheme)
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
     return () => {