chore: restore original onRenderBody structure and apply precise FOUC fixes with comments

Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

Author: AnkitRewar11

onRenderBody.js

@@ -5,8 +5,7 @@ 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.
+  // Injects CSS variables and theme state before the first paint to prevent FOUC.
   const codeToRunOnClient = `
       (function() {
           // 1. Keeps SYSTEM as the priority preference
@@ -49,12 +48,18 @@ const MagicScriptTag = (props) => {
           const theme = parsedTheme[colorMode]
           iterate(theme)
           root.style.setProperty('--initial-color-mode', colorMode);  
+          
+          // FIX: Setting data-theme is required for global CSS styles
+          root.setAttribute('data-theme', colorMode);
+
+          // Sync the calculated theme globally
           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
+export const onRenderBody = ( { setHeadComponents }) => {
+  setHeadComponents([<MagicScriptTag key="theme-injection" theme={themes} />]);
+};

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) => {

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,16 +37,13 @@ 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;
 };
 
 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]