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>

Author: AnkitRewar11

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} />);
 };