From a5c4a7d719892bd8fc050f620be860ca9ff51b60 Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Sat, 21 Mar 2026 19:04:39 +0530
Subject: [PATCH 1/7] fix: resolve dark mode flicker issue

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 onRenderBody.js                      | 109 +++++++++++++++------------
 src/theme/app/StyledThemeProvider.js |  10 +--
 src/theme/app/ThemeManager.js        |  33 ++++----
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/onRenderBody.js b/onRenderBody.js
index 370709d6c1ceb..1d0cf975d41d8 100644
--- a/onRenderBody.js
+++ b/onRenderBody.js
@@ -1,57 +1,70 @@
 import React from "react";
-import { DarkThemeKey, ThemeSetting } from "./src/theme/app/ThemeManager.js";
+import { DarkThemeKey, ThemeSetting } from "./src/theme/app/ThemeManager";
 import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
 
-const themes = { light: lighttheme, dark: darktheme };
+const themes = {
+  light: lighttheme,
+  dark: darktheme,
+};
+
+const MagicScriptTag = ({ theme }) => {
+  const themeJSON = JSON.stringify(theme);
 
-const MagicScriptTag = (props) => {
   const codeToRunOnClient = `
-      (function() {
-          // 1. Keeps SYSTEM as the priority preference
-          const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
-
-          // 2. We change the check to look for LIGHT mode explicitly
-          const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
-          
-          const isLightModeActive = () => {
-              return !!systemLightModeSetting()?.matches;
-          };
-
-          let colorMode;
-          switch (themeFromLocalStorage) {
-              case '${ThemeSetting.SYSTEM}':
-                // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark.
-                colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}'
-                break
-              case '${ThemeSetting.DARK}':
-              case '${ThemeSetting.LIGHT}':
-                colorMode = themeFromLocalStorage
-                break
-              default:
-                  // 3. Fallback to DARK in case of error
-                  colorMode = '${ThemeSetting.DARK}'
-            }
-
-          const root = document.documentElement;
-          const iterate = (obj) => {
-            if (!obj) return;
-            Object.keys(obj).forEach(key => {
-              if (typeof obj[key] === 'object') {
-                iterate(obj[key])
-              } else {
-                root.style.setProperty("--" + key, obj[key])
-              }
-            })
-          }
-          const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
-          const theme = parsedTheme[colorMode]
-          iterate(theme)
-          root.style.setProperty('--initial-color-mode', colorMode);  
-       })()
-  `;
+(function() {
+  try {
+    var themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
+    var systemLightModeSetting = function() {
+      return window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+    };
+    var isLightModeActive = function() {
+      var mql = systemLightModeSetting();
+      return mql ? mql.matches : false;
+    };
+
+    var colorMode;
+    switch (themeFromLocalStorage) {
+      case '${ThemeSetting.SYSTEM}':
+        colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}';
+        break;
+      case '${ThemeSetting.DARK}':
+      case '${ThemeSetting.LIGHT}':
+        colorMode = themeFromLocalStorage;
+        break;
+      default:
+        colorMode = '${ThemeSetting.DARK}';
+    }
+
+    var root = document.documentElement;
+    var parsedTheme = ${themeJSON};
+    var selectedTheme = parsedTheme[colorMode];
+
+    var iterate = function(obj) {
+      if (!obj) return;
+      Object.keys(obj).forEach(function(key) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+          iterate(obj[key]);
+        } else {
+          root.style.setProperty('--' + key, obj[key]);
+        }
+      });
+    };
+
+    iterate(selectedTheme);
+    root.style.setProperty('--initial-color-mode', colorMode);
+    root.setAttribute('data-theme', colorMode);
+
+    window.__theme = colorMode;
+
+  } catch (e) {}
+})();
+`;
+
   return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
 };
 
-export const onRenderBody = ( { setPreBodyComponents }) => {
-  setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <MagicScriptTag key="theme-initializer" theme={themes} />,
+  ]);
 };
diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index 5a396f3d18c68..89f31bff7b70a 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -1,22 +1,16 @@
-//uses isDark state to choose styled-component theme (in themeStyles.js)
-//and use ThemeProvider to allow all styled components access to values via props.theme
-
 import React, { useContext } from "react";
 import { ThemeProvider } from "styled-components";
 import { ThemeManagerContext } from "./ThemeManager";
 
-// Safe check for browser environment
 const isBrowser = typeof window !== "undefined";
 
 export const StyledThemeProvider = (props) => {
   const { children, darkTheme, lightTheme } = props;
   const { isDark, didLoad } = useContext(ThemeManagerContext);
 
-  // For SSR, we need to provide a consistent theme initially
-  // This ensures the server and client render the same thing initially
   const currentTheme = isDark ? darkTheme : lightTheme;
   const theme = {
-    ...(didLoad || !isBrowser ? currentTheme : transformTheme(currentTheme)),
+    ...(didLoad ? currentTheme : transformTheme(currentTheme)),
   };
 
   return (
@@ -39,5 +33,3 @@ const transformTheme = (theme) => {
 
   return newTheme;
 };
-
-
diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index f3b71d625eedf..43a65cc0a669b 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -1,7 +1,3 @@
-//majority of code from https://www.joshwcomeau.com/react/dark-mode/ and https://github.com/gperl27/gatsby-styled-components-dark-mode
-
-//context provider for app to make accessible theme setting, toggle function, etc.
-
 import React, { createContext, useState, useEffect, useCallback } from "react";
 
 export const ThemeSetting = {
@@ -22,11 +18,11 @@ const defaultState = {
 
 export const ThemeManagerContext = createContext(defaultState);
 
-// Safe check for browser environment
 const isBrowser = typeof window !== "undefined";
 
 const systemDarkModeSetting = () =>
   isBrowser && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+
 const isDarkModeActive = () => {
   return !!systemDarkModeSetting()?.matches;
 };
@@ -36,20 +32,28 @@ const applyThemeToDOM = (theme) => {
   const root = window.document.documentElement;
   root.style.setProperty("--initial-color-mode", theme);
   root.setAttribute("data-theme", theme);
+  window.__theme = theme;
 };
 
 export const ThemeManagerProvider = (props) => {
   const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
   const [didLoad, setDidLoad] = useState(false);
-  const [isDark, setIsDark] = useState(false);
+  
+  const [isDark, setIsDark] = useState(() => {
+    if (isBrowser) {
+      if (window.__theme === ThemeSetting.DARK) return true;
+      if (window.__theme === ThemeSetting.LIGHT) return false;
+    }
+    return false;
+  });
 
   useEffect(() => {
     if (!isBrowser) return;
 
     const root = window.document.documentElement;
-    const initialColorValue = root.style.getPropertyValue("--initial-color-mode");
+    const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
+    const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;
 
-    // Get stored theme from localStorage
     const storedTheme = localStorage.getItem(DarkThemeKey);
 
     if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {
@@ -57,11 +61,10 @@ export const ThemeManagerProvider = (props) => {
       setIsDark(isDarkTheme);
       setThemeSetting(storedTheme);
       applyThemeToDOM(storedTheme);
-    } else if (initialColorValue) {
-      setIsDark(initialColorValue === ThemeSetting.DARK);
+    } else if (actualTheme) {
+      setIsDark(actualTheme === ThemeSetting.DARK);
       setThemeSetting(ThemeSetting.SYSTEM);
     } else {
-      // Fallback to system preference
       const systemIsDark = isDarkModeActive();
       setIsDark(systemIsDark);
       const theme = systemIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
@@ -71,7 +74,6 @@ export const ThemeManagerProvider = (props) => {
     setDidLoad(true);
   }, []);
 
-  // Listen to system color scheme changes only when on SYSTEM mode
   useEffect(() => {
     if (!isBrowser || themeSetting !== ThemeSetting.SYSTEM) return;
 
@@ -93,14 +95,11 @@ export const ThemeManagerProvider = (props) => {
     const newIsDark = !isDark;
     const newTheme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
 
-    // Update state
     setIsDark(newIsDark);
     setThemeSetting(newTheme);
 
-    // Apply to DOM immediately
     applyThemeToDOM(newTheme);
 
-    // Persist to localStorage
     localStorage.setItem(DarkThemeKey, newTheme);
   }, [isDark]);
 
@@ -129,14 +128,10 @@ export const ThemeManagerProvider = (props) => {
           return;
       }
 
-      // Update state
       setIsDark(newIsDark);
       setThemeSetting(setting);
 
-      // Apply to DOM immediately
       applyThemeToDOM(themeToApply);
-
-      // Persist to localStorage
       localStorage.setItem(DarkThemeKey, setting);
     },
     [isDark]

From c78a6f91c2a8825ac9dc34c610ccc797d91c6f65 Mon Sep 17 00:00:00 2001
From: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Date: Mon, 23 Mar 2026 11:55:44 +0530
Subject: [PATCH 2/7] Update StyledThemeProvider for SSR theme consistency

Refactor StyledThemeProvider to ensure consistent theme rendering for SSR.

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
---
 src/theme/app/StyledThemeProvider.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index 89f31bff7b70a..14c9dbc068fdb 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -1,13 +1,19 @@
+//uses isDark state to choose styled-component theme (in themeStyles.js)
+//and use ThemeProvider to allow all styled components access to values via props.theme
+
 import React, { useContext } from "react";
 import { ThemeProvider } from "styled-components";
 import { ThemeManagerContext } from "./ThemeManager";
 
+// Safe check for browser environment
 const isBrowser = typeof window !== "undefined";
 
 export const StyledThemeProvider = (props) => {
   const { children, darkTheme, lightTheme } = props;
   const { isDark, didLoad } = useContext(ThemeManagerContext);
 
+  // For SSR, we need to provide a consistent theme initially
+  // This ensures the server and client render the same thing initially
   const currentTheme = isDark ? darkTheme : lightTheme;
   const theme = {
     ...(didLoad ? currentTheme : transformTheme(currentTheme)),
@@ -20,7 +26,7 @@ export const StyledThemeProvider = (props) => {
   );
 };
 
-const transformTheme = (theme) => {
+// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.const transformTheme = (theme) => {
   const newTheme = {};
   Object.keys(theme).forEach((key) => {
     const value = theme[key];

From 21df90e1f2456f51deb6ec513dceed806b27a6d5 Mon Sep 17 00:00:00 2001
From: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Date: Mon, 23 Mar 2026 12:05:57 +0530
Subject: [PATCH 3/7] Refactor ThemeManager for improved theme handling

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
---
 src/theme/app/ThemeManager.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index 43a65cc0a669b..21022fb4c3624 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -1,3 +1,6 @@
+// majority of code from https://www.joshwcomeau.com/react/dark-mode/ and https://github.com/gperl27/gatsby-styled-components-dark-mode
+// context provider for app to make accessible theme setting, toggle function, etc.
+
 import React, { createContext, useState, useEffect, useCallback } from "react";
 
 export const ThemeSetting = {
@@ -18,6 +21,7 @@ const defaultState = {
 
 export const ThemeManagerContext = createContext(defaultState);
 
+// Safe check for browser environment
 const isBrowser = typeof window !== "undefined";
 
 const systemDarkModeSetting = () =>
@@ -32,6 +36,8 @@ const applyThemeToDOM = (theme) => {
   const root = window.document.documentElement;
   root.style.setProperty("--initial-color-mode", theme);
   root.setAttribute("data-theme", theme);
+  
+  // Sync with SSR injected state
   window.__theme = theme;
 };
 
@@ -39,6 +45,7 @@ export const ThemeManagerProvider = (props) => {
   const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
   const [didLoad, setDidLoad] = useState(false);
   
+  // Initialize state from SSR script to prevent hydration mismatch
   const [isDark, setIsDark] = useState(() => {
     if (isBrowser) {
       if (window.__theme === ThemeSetting.DARK) return true;
@@ -52,8 +59,11 @@ export const ThemeManagerProvider = (props) => {
 
     const root = window.document.documentElement;
     const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
+    
+    // Prioritize SSR-injected theme
     const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;
 
+    // Get stored theme from localStorage
     const storedTheme = localStorage.getItem(DarkThemeKey);
 
     if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {
@@ -65,6 +75,7 @@ export const ThemeManagerProvider = (props) => {
       setIsDark(actualTheme === ThemeSetting.DARK);
       setThemeSetting(ThemeSetting.SYSTEM);
     } else {
+      // Fallback to system preference
       const systemIsDark = isDarkModeActive();
       setIsDark(systemIsDark);
       const theme = systemIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
@@ -74,6 +85,7 @@ export const ThemeManagerProvider = (props) => {
     setDidLoad(true);
   }, []);
 
+  // Listen to system color scheme changes only when on SYSTEM mode
   useEffect(() => {
     if (!isBrowser || themeSetting !== ThemeSetting.SYSTEM) return;
 
@@ -95,11 +107,14 @@ export const ThemeManagerProvider = (props) => {
     const newIsDark = !isDark;
     const newTheme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
 
+    // Update state
     setIsDark(newIsDark);
     setThemeSetting(newTheme);
 
+    // Apply to DOM immediately
     applyThemeToDOM(newTheme);
 
+    // Persist to localStorage
     localStorage.setItem(DarkThemeKey, newTheme);
   }, [isDark]);
 
@@ -128,10 +143,14 @@ export const ThemeManagerProvider = (props) => {
           return;
       }
 
+      // Update state
       setIsDark(newIsDark);
       setThemeSetting(setting);
 
+      // Apply to DOM immediately
       applyThemeToDOM(themeToApply);
+
+      // Persist to localStorage
       localStorage.setItem(DarkThemeKey, setting);
     },
     [isDark]

From ed0aa743d21c6a011226a92d1f3986c4bc6a8fbf Mon Sep 17 00:00:00 2001
From: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Date: Mon, 23 Mar 2026 12:12:11 +0530
Subject: [PATCH 4/7] Refactor theme injection logic in onRenderBody.js

Refactor theme handling logic in MagicScriptTag component. Update the way themes are injected into the document and change the function signature for onRenderBody.

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
---
 onRenderBody.js | 112 ++++++++++++++++++++++--------------------------
 1 file changed, 51 insertions(+), 61 deletions(-)

diff --git a/onRenderBody.js b/onRenderBody.js
index 1d0cf975d41d8..6c46905eb1397 100644
--- a/onRenderBody.js
+++ b/onRenderBody.js
@@ -1,70 +1,60 @@
 import React from "react";
-import { DarkThemeKey, ThemeSetting } from "./src/theme/app/ThemeManager";
+import { DarkThemeKey, ThemeSetting } from "./src/theme/app/ThemeManager.js";
 import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
 
-const themes = {
-  light: lighttheme,
-  dark: darktheme,
-};
-
-const MagicScriptTag = ({ theme }) => {
-  const themeJSON = JSON.stringify(theme);
+const themes = { light: lighttheme, dark: darktheme };
 
+const MagicScriptTag = (props) => {
+  // Injects CSS variables before first paint. The React hydration mismatch 
+  // is resolved downstream in ThemeManager.js using window.__theme.
   const codeToRunOnClient = `
-(function() {
-  try {
-    var themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
-    var systemLightModeSetting = function() {
-      return window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
-    };
-    var isLightModeActive = function() {
-      var mql = systemLightModeSetting();
-      return mql ? mql.matches : false;
-    };
-
-    var colorMode;
-    switch (themeFromLocalStorage) {
-      case '${ThemeSetting.SYSTEM}':
-        colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}';
-        break;
-      case '${ThemeSetting.DARK}':
-      case '${ThemeSetting.LIGHT}':
-        colorMode = themeFromLocalStorage;
-        break;
-      default:
-        colorMode = '${ThemeSetting.DARK}';
-    }
-
-    var root = document.documentElement;
-    var parsedTheme = ${themeJSON};
-    var selectedTheme = parsedTheme[colorMode];
-
-    var iterate = function(obj) {
-      if (!obj) return;
-      Object.keys(obj).forEach(function(key) {
-        if (typeof obj[key] === 'object' && obj[key] !== null) {
-          iterate(obj[key]);
-        } else {
-          root.style.setProperty('--' + key, obj[key]);
-        }
-      });
-    };
-
-    iterate(selectedTheme);
-    root.style.setProperty('--initial-color-mode', colorMode);
-    root.setAttribute('data-theme', colorMode);
-
-    window.__theme = colorMode;
-
-  } catch (e) {}
-})();
-`;
-
+      (function() {
+          // 1. Keeps SYSTEM as the priority preference
+          const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
+
+          // 2. We change the check to look for LIGHT mode explicitly
+          const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+          
+          const isLightModeActive = () => {
+              return !!systemLightModeSetting()?.matches;
+          };
+
+          let colorMode;
+          switch (themeFromLocalStorage) {
+              case '${ThemeSetting.SYSTEM}':
+                // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark.
+                colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}'
+                break
+              case '${ThemeSetting.DARK}':
+              case '${ThemeSetting.LIGHT}':
+                colorMode = themeFromLocalStorage
+                break
+              default:
+                  // 3. Fallback to DARK in case of error
+                  colorMode = '${ThemeSetting.DARK}'
+            }
+
+          const root = document.documentElement;
+          const iterate = (obj) => {
+            if (!obj) return;
+            Object.keys(obj).forEach(key => {
+              if (typeof obj[key] === 'object') {
+                iterate(obj[key])
+              } else {
+                root.style.setProperty("--" + key, obj[key])
+              }
+            })
+          }
+          const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
+          const theme = parsedTheme[colorMode]
+          iterate(theme)
+          root.style.setProperty('--initial-color-mode', colorMode);  
+          window.__theme = colorMode;
+       })()
+  `;
   return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
 };
 
-export const onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([
-    <MagicScriptTag key="theme-initializer" theme={themes} />,
-  ]);
+export const onRenderBody = ( { setPreBodyComponents }) => {
+  setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
 };

From 9ad62cbd0f947c8ea9d8cca59b79d96220ed4be8 Mon Sep 17 00:00:00 2001
From: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Date: Mon, 23 Mar 2026 12:15:34 +0530
Subject: [PATCH 5/7] Refactor StyledThemeProvider with improved comments

Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration.

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
---
 src/theme/app/StyledThemeProvider.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index 14c9dbc068fdb..e3e98b1c20458 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -12,9 +12,9 @@ export const StyledThemeProvider = (props) => {
   const { children, darkTheme, lightTheme } = props;
   const { isDark, didLoad } = useContext(ThemeManagerContext);
 
-  // For SSR, we need to provide a consistent theme initially
-  // This ensures the server and client render the same thing initially
   const currentTheme = isDark ? darkTheme : lightTheme;
+  
+  // Fallback to SSR-injected CSS variables during hydration to prevent FOUC.
   const theme = {
     ...(didLoad ? currentTheme : transformTheme(currentTheme)),
   };
@@ -26,7 +26,8 @@ export const StyledThemeProvider = (props) => {
   );
 };
 
-// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.const transformTheme = (theme) => {
+// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.
+const transformTheme = (theme) => {
   const newTheme = {};
   Object.keys(theme).forEach((key) => {
     const value = theme[key];

From f60787adcbfcb733a042faa1242d66e276df73b5 Mon Sep 17 00:00:00 2001
From: Ankit Rewar <AnkitRewar11@users.noreply.github.com>
Date: Mon, 23 Mar 2026 13:46:29 +0530
Subject: [PATCH 6/7] chore: restore original onRenderBody structure and apply
 precise FOUC fixes with comments

Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>
---
 onRenderBody.js                      | 104 ++++++++++++++++-----------
 src/theme/app/StyledThemeProvider.js |   5 +-
 src/theme/app/ThemeManager.js        |  21 +++---
 3 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/onRenderBody.js b/onRenderBody.js
index 6c46905eb1397..be599ff08b70a 100644
--- a/onRenderBody.js
+++ b/onRenderBody.js
@@ -5,56 +5,76 @@ import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
 const themes = { light: lighttheme, dark: darktheme };
 
 const MagicScriptTag = (props) => {
-  // Injects CSS variables before first paint. The React hydration mismatch 
-  // is resolved downstream in ThemeManager.js using window.__theme.
+  // FIX: Stringify the theme object outside the template literal to prevent
+  const themeJSON = JSON.stringify(props.theme);
+  
+  // Injects CSS variables and theme state strictly before the first paint to prevent FOUC.
   const codeToRunOnClient = `
       (function() {
-          // 1. Keeps SYSTEM as the priority preference
-          const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
+          try {
+              // 1. Keeps SYSTEM as the priority preference
+              const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
 
-          // 2. We change the check to look for LIGHT mode explicitly
-          const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
-          
-          const isLightModeActive = () => {
-              return !!systemLightModeSetting()?.matches;
-          };
+              // 2. We change the check to look for LIGHT mode explicitly
+              const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+              
+              const isLightModeActive = () => {
+                  return !!systemLightModeSetting()?.matches;
+              };
 
-          let colorMode;
-          switch (themeFromLocalStorage) {
-              case '${ThemeSetting.SYSTEM}':
-                // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark.
-                colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}'
-                break
-              case '${ThemeSetting.DARK}':
-              case '${ThemeSetting.LIGHT}':
-                colorMode = themeFromLocalStorage
-                break
-              default:
-                  // 3. Fallback to DARK in case of error
-                  colorMode = '${ThemeSetting.DARK}'
-            }
+              let colorMode;
+              switch (themeFromLocalStorage) {
+                  case '${ThemeSetting.SYSTEM}':
+                    // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark.
+                    colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}';
+                    break;
+                  case '${ThemeSetting.DARK}':
+                  case '${ThemeSetting.LIGHT}':
+                    colorMode = themeFromLocalStorage;
+                    break;
+                  default:
+                      // 3. Fallback to DARK in case of error
+                      colorMode = '${ThemeSetting.DARK}';
+              }
 
-          const root = document.documentElement;
-          const iterate = (obj) => {
-            if (!obj) return;
-            Object.keys(obj).forEach(key => {
-              if (typeof obj[key] === 'object') {
-                iterate(obj[key])
-              } else {
-                root.style.setProperty("--" + key, obj[key])
+              const root = document.documentElement;
+              const iterate = (obj) => {
+                if (!obj) return;
+                Object.keys(obj).forEach(key => {
+                  if (typeof obj[key] === 'object') {
+                    iterate(obj[key]);
+                  } else {
+                    root.style.setProperty("--" + key, obj[key]);
+                  }
+                });
+              };
+              
+              // FIX: Inject the JSON object directly to avoid JSON.parse breaking on nested quotes.
+              const parsedTheme = ${themeJSON};
+              const theme = parsedTheme[colorMode];
+              
+              if (theme) {
+                iterate(theme);
               }
-            })
+              
+              root.style.setProperty('--initial-color-mode', colorMode);  
+              
+              // FIX: Setting data-theme is required for global CSS styles to apply correctly before React hydration.
+              root.setAttribute('data-theme', colorMode);
+              
+              // Sync the calculated theme globally so ThemeManager can pick it up seamlessly.
+              window.__theme = colorMode;
+              
+          } catch (e) {
+              console.error('Dark mode injection failed:', e);
           }
-          const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
-          const theme = parsedTheme[colorMode]
-          iterate(theme)
-          root.style.setProperty('--initial-color-mode', colorMode);  
-          window.__theme = colorMode;
-       })()
+       })();
   `;
   return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
 };
 
-export const onRenderBody = ( { setPreBodyComponents }) => {
-  setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
-};
+// FIX: Using setHeadComponents instead of setPreBodyComponents ensures the script runs
+// strictly in the <head>, blocking the first paint until the theme is applied and completely eliminating FOUC.
+export const onRenderBody = ( { setHeadComponents }) => {
+  setHeadComponents([<MagicScriptTag key="theme-injection" theme={themes} />]);
+};
\ No newline at end of file
diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index e3e98b1c20458..81453b5499ed8 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -12,9 +12,9 @@ export const StyledThemeProvider = (props) => {
   const { children, darkTheme, lightTheme } = props;
   const { isDark, didLoad } = useContext(ThemeManagerContext);
 
+  // For SSR, we need to provide a consistent theme initially
+  // This ensures the server and client render the same thing initially
   const currentTheme = isDark ? darkTheme : lightTheme;
-  
-  // Fallback to SSR-injected CSS variables during hydration to prevent FOUC.
   const theme = {
     ...(didLoad ? currentTheme : transformTheme(currentTheme)),
   };
@@ -26,7 +26,6 @@ export const StyledThemeProvider = (props) => {
   );
 };
 
-// Maps JS theme object to raw CSS variables (--key) initialized via onRenderBody.
 const transformTheme = (theme) => {
   const newTheme = {};
   Object.keys(theme).forEach((key) => {
diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index 21022fb4c3624..c9c67570aa0eb 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -1,5 +1,6 @@
-// majority of code from https://www.joshwcomeau.com/react/dark-mode/ and https://github.com/gperl27/gatsby-styled-components-dark-mode
-// context provider for app to make accessible theme setting, toggle function, etc.
+//majority of code from https://www.joshwcomeau.com/react/dark-mode/ and https://github.com/gperl27/gatsby-styled-components-dark-mode
+
+//context provider for app to make accessible theme setting, toggle function, etc.
 
 import React, { createContext, useState, useEffect, useCallback } from "react";
 
@@ -36,8 +37,6 @@ const applyThemeToDOM = (theme) => {
   const root = window.document.documentElement;
   root.style.setProperty("--initial-color-mode", theme);
   root.setAttribute("data-theme", theme);
-  
-  // Sync with SSR injected state
   window.__theme = theme;
 };
 
@@ -45,7 +44,6 @@ export const ThemeManagerProvider = (props) => {
   const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
   const [didLoad, setDidLoad] = useState(false);
   
-  // Initialize state from SSR script to prevent hydration mismatch
   const [isDark, setIsDark] = useState(() => {
     if (isBrowser) {
       if (window.__theme === ThemeSetting.DARK) return true;
@@ -59,11 +57,8 @@ export const ThemeManagerProvider = (props) => {
 
     const root = window.document.documentElement;
     const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
-    
-    // Prioritize SSR-injected theme
     const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;
 
-    // Get stored theme from localStorage
     const storedTheme = localStorage.getItem(DarkThemeKey);
 
     if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {
@@ -85,7 +80,7 @@ export const ThemeManagerProvider = (props) => {
     setDidLoad(true);
   }, []);
 
-  // Listen to system color scheme changes only when on SYSTEM mode
+   // Listen to system color scheme changes only when on SYSTEM mode
   useEffect(() => {
     if (!isBrowser || themeSetting !== ThemeSetting.SYSTEM) return;
 
@@ -107,11 +102,11 @@ export const ThemeManagerProvider = (props) => {
     const newIsDark = !isDark;
     const newTheme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
 
-    // Update state
+      // Update state
     setIsDark(newIsDark);
     setThemeSetting(newTheme);
 
-    // Apply to DOM immediately
+     // Apply to DOM immediately
     applyThemeToDOM(newTheme);
 
     // Persist to localStorage
@@ -143,14 +138,14 @@ export const ThemeManagerProvider = (props) => {
           return;
       }
 
-      // Update state
+        // Update state
       setIsDark(newIsDark);
       setThemeSetting(setting);
 
       // Apply to DOM immediately
       applyThemeToDOM(themeToApply);
 
-      // Persist to localStorage
+       // Persist to localStorage
       localStorage.setItem(DarkThemeKey, setting);
     },
     [isDark]

From 4491cc1596fde85f3410812573617795527739e5 Mon Sep 17 00:00:00 2001
From: Ankit Rewar <AnkitRewar11@users.noreply.github.com>
Date: Tue, 31 Mar 2026 17:43:54 +0530
Subject: [PATCH 7/7] add one more comment

Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>
---
 onRenderBody.js                      |  2 +-
 src/html.js                          | 25 ++-----------------------
 src/theme/app/StyledThemeProvider.js |  3 ---
 src/theme/app/ThemeManager.js        |  5 +++--
 4 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/onRenderBody.js b/onRenderBody.js
index be599ff08b70a..139a6b6feffd1 100644
--- a/onRenderBody.js
+++ b/onRenderBody.js
@@ -5,7 +5,7 @@ import lighttheme, { darktheme } from "./src/theme/app/themeStyles";
 const themes = { light: lighttheme, dark: darktheme };
 
 const MagicScriptTag = (props) => {
-  // FIX: Stringify the theme object outside the template literal to prevent
+  // FIX: Stringify the theme object outside the template literal to prevent syntax errors caused by unescaped quotes inside theme values.
   const themeJSON = JSON.stringify(props.theme);
   
   // Injects CSS variables and theme state strictly before the first paint to prevent FOUC.
diff --git a/src/html.js b/src/html.js
index 12e4c194c7770..b0b21966b20c8 100644
--- a/src/html.js
+++ b/src/html.js
@@ -25,33 +25,12 @@ export default function HTML(props) {
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>
-        {/* Script for theme initialization - needs to run before React renders to prevent flicker */}
+        {/* Script for banner initialization */}
         <script
           dangerouslySetInnerHTML={{
             __html: `
               (function() {
                 try {
-                  // Theme initialization
-                  const darkThemeKey = 'theme';
-                  let initialTheme = 'system';
-                  try {
-                    initialTheme = localStorage.getItem(darkThemeKey) || 'system';
-                  } catch (e) {}
-                  
-                  // Determine initial dark mode
-                  let isDarkMode = false;
-                  if (initialTheme === 'dark') {
-                    isDarkMode = true;
-                  } else if (initialTheme === 'system') {
-                    isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-                  }
-                  
-                  // Set initial color mode
-                  document.documentElement.style.setProperty(
-                    '--initial-color-mode',
-                    isDarkMode ? 'dark' : 'light'
-                  );
-                  
                   // Banner initialization
                   var banner = sessionStorage.getItem('banner');
                   if (banner === null)
@@ -59,7 +38,7 @@ export default function HTML(props) {
                   else
                     document.body.classList.add('banner' + banner);
                 } catch (e) {
-                  console.error('Error in theme initialization:', e);
+                  console.error('Error in banner initialization:', e);
                 }
               })();
             `,
diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index 81453b5499ed8..305d5d19726b4 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -5,9 +5,6 @@ import React, { useContext } from "react";
 import { ThemeProvider } from "styled-components";
 import { ThemeManagerContext } from "./ThemeManager";
 
-// Safe check for browser environment
-const isBrowser = typeof window !== "undefined";
-
 export const StyledThemeProvider = (props) => {
   const { children, darkTheme, lightTheme } = props;
   const { isDark, didLoad } = useContext(ThemeManagerContext);
diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index c9c67570aa0eb..819c2881855d5 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -57,8 +57,9 @@ export const ThemeManagerProvider = (props) => {
 
     const root = window.document.documentElement;
     const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
-    const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;
-
+    const actualTheme = window.__theme || initialColorValue || ThemeSetting.DARK;
+    
+    // Get stored theme from localStorage
     const storedTheme = localStorage.getItem(DarkThemeKey);
 
     if (storedTheme && storedTheme !== ThemeSetting.SYSTEM) {