ui redesign

frontend/index.html

@@ -8,23 +8,42 @@
   </head>
   <body style="margin: 0; padding: 0;">
     <script>
-      (function() {
-        const theme = localStorage.getItem('theme') || 'holy_light';
-        const darkThemes = ['holy_dark', 'frappe', 'macchiato', 'mocha', 'dracula', 'nord', 'gruvbox', 'oceanic', 't0p_trench', 't0p_blurryface', 't0p_clancy'];
-        const isDark = darkThemes.includes(theme);
-        
-        // Define primary background colors for common themes to prevent flash
-        const bgColors = {
-          'holy_light': '#f8fafc',
-          'holy_dark': '#020617',
-          'pink_pastel': '#fff1f2',
-          'mocha': '#1e1e2e',
-          't0p_sai': '#fdf2f8',
-          't0p_trench': '#1a1a1a'
+      // Paints the page ground before React mounts so there's no white flash.
+      // Kept deliberately in sync with getTheme() in src/theme.ts — when a
+      // theme is added there, add its base colour here too, or it falls back to
+      // a generic light/dark grey for the first frame.
+      (function () {
+        const bg = {
+          holy_light: '#f8fafc',
+          holy_dark: '#020617',
+          latte: '#eff1f5',
+          frappe: '#303446',
+          macchiato: '#24273a',
+          mocha: '#1e1e2e',
+          pink_pastel: '#fff1f2',
+          mint_pastel: '#f0fdf4',
+          lavender_pastel: '#f5f3ff',
+          dracula: '#282a36',
+          nord: '#2e3440',
+          gruvbox: '#282828',
+          oceanic: '#1b262c',
+          t0p_sai: '#fdf2f8',
+          t0p_trench: '#1a1a1a',
+          t0p_blurryface: '#000000',
+          t0p_clancy: '#000000',
         };
-        
-        document.body.style.backgroundColor = bgColors[theme] || (isDark ? '#0f172a' : '#f8fafc');
-        document.body.style.color = isDark ? '#f8fafc' : '#0f172a';
+        const light = [
+          'holy_light',
+          'latte',
+          'pink_pastel',
+          'mint_pastel',
+          'lavender_pastel',
+          't0p_sai',
+        ];
+        const theme = localStorage.getItem('theme') || 'holy_light';
+        const isLight = light.includes(theme);
+        document.body.style.backgroundColor = bg[theme] || (isLight ? '#f8fafc' : '#0f172a');
+        document.body.style.color = isLight ? '#0f172a' : '#f8fafc';
       })();
     </script>
     <div id="root"></div>