From 06e6846ffe0eba911d1561c081730c01df1dbc9b Mon Sep 17 00:00:00 2001
From: ryder777777 <ryder777777@users.noreply.github.com>
Date: Tue, 20 Oct 2026 15:05:34 +0000
Subject: [PATCH] fix(frontend): run theme pre-init script synchronously in
 <head> to prevent dark mode flicker (#1482)

---
 frontend/index.html | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 22eb7d03..51034ef0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,22 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#071018" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <title>Trivela — Stellar Campaign & Rewards</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
     <script>
-      // Apply the saved (or OS-preferred) theme before first paint to avoid a flash of the wrong theme.
+      // Apply the saved (or OS-preferred) theme synchronously in <head> before first paint to eliminate dark-mode FOUC (#1482).
       (function () {
         try {
           var saved = window.localStorage.getItem('trivela-theme');
@@ -27,10 +18,21 @@
                 ? 'light'
                 : 'dark';
           document.documentElement.dataset.theme = theme;
+          document.documentElement.classList.remove('light', 'dark');
+          document.documentElement.classList.add(theme);
           document.documentElement.style.colorScheme = theme;
         } catch (e) {}
       })();
     </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
     <script src="https://cdn.jsdelivr.net/npm/@stellar/freighter-api@6.0.1/build/index.min.js"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>