From a2a5a223242e1bcab76e244683e18a7f3fec04ce Mon Sep 17 00:00:00 2001
From: Alex <25013571+alexhb1@users.noreply.github.com>
Date: Sat, 7 Mar 2026 19:13:28 +0000
Subject: [PATCH] Fix theming bug (#722)

---
 src/frontend/index.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/frontend/index.html b/src/frontend/index.html
index 402e17ba..56c016ce 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -20,23 +20,26 @@
     <link rel="apple-touch-icon" href="logo.png" />
     <title>Shelfmark</title>
     <script>
-      // Apply theme immediately before first paint to prevent flash
+      // Apply theme immediately before first paint to prevent flash.
+      // CSS variables aren't available until the stylesheet loads, so set
+      // the background color directly on <html> to avoid a white flash.
       (function() {
         const savedTheme = localStorage.getItem('preferred-theme') || 'auto';
         let theme = savedTheme;
-        
+
         if (savedTheme === 'auto') {
           theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }
-        
+
         document.documentElement.setAttribute('data-theme', theme);
-        
+        document.documentElement.style.backgroundColor = theme === 'dark' ? '#121212' : '#f8f8f8';
+
         // Add class to prevent transitions on initial load
         document.documentElement.classList.add('preload');
       })();
     </script>
   </head>
-  <body style="background: var(--bg); color: var(--text);">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>