fix: resolve dark mode white flash on initial page load

fonts.css

@@ -1,144 +1,144 @@
+/* FOUC fix — CSS loads before JS, so dark bg is set immediately */
+html {
+  background-color: #121212;
+}
+
+html[data-theme="light"],
+html[data-theme="light"] body {
+  background-color: #FFFFFF;
+}
+
+html[data-theme="dark"],
+html[data-theme="dark"] body {
+  background-color: #121212;
+}
+
+body {
+  background-color: var(--background, #121212);
+}
+
 @font-face {
     font-family: "Qanelas Soft Black";
     src: url('./static/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype');
     font-weight: normal;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Black Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftBlackItalic.otf') format('opentype');
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Heavy";
     src: url('./static/fonts/qanelas-soft/QanelasSoftHeavy.otf') format('opentype');
     font-weight: 900;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Heavy Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftHeavyItalic.otf') format('opentype');
     font-weight: 900;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft ExtraBold";
     src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBold.otf') format('opentype');
     font-weight: 800;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft ExtraBold Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftExtraBoldItalic.otf') format('opentype');
     font-weight: 800;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Bold";
     src: url('./static/fonts/qanelas-soft/QanelasSoftBold.otf') format('opentype');
     font-weight: bold;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Bold Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftBoldItalic.otf') format('opentype');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft";
     src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBold.otf') format('opentype');
     font-weight: 600;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft SemiBold Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftSemiBoldItalic.otf') format('opentype');
     font-weight: 600;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Medium";
     src: url('./static/fonts/qanelas-soft/QanelasSoftMedium.otf') format('opentype');
     font-weight: 500;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Medium Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftMediumItalic.otf') format('opentype');
     font-weight: 500;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft";
     src: url('./static/fonts/qanelas-soft/QanelasSoftRegular.otf') format('opentype');
     font-weight: 400;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Regular Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftRegularItalic.otf') format('opentype');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Light";
     src: url('./static/fonts/qanelas-soft/QanelasSoftLight.otf') format('opentype');
     font-weight: 300;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Light Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftLightItalic.otf') format('opentype');
     font-weight: 300;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft UltraLight";
     src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLight.otf') format('opentype');
     font-weight: 200;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft UltraLight Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftUltraLightItalic.otf') format('opentype');
     font-weight: 200;
     font-style: italic;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Thin";
     src: url('./static/fonts/qanelas-soft/QanelasSoftThin.otf') format('opentype');
     font-weight: 100;
     font-display: swap;
 }
-
 @font-face {
     font-family: "Qanelas Soft Thin Italic";
     src: url('./static/fonts/qanelas-soft/QanelasSoftThinItalic.otf') format('opentype');
@@ -153,19 +153,17 @@
   font-display: swap;
   src: url("./static/fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url("./static/fonts/open-sans/OpenSans-SemiBold.ttf") format("truetype");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("./static/fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
-}
+}

onRenderBody.js

@@ -1,57 +1,44 @@
 import React from "react";
-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 = (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);  
-       })()
+export const onRenderBody = ({ setHeadComponents }) => {
+  const scriptContent = `
+    (function() {
+      try {
+        var stored = localStorage.getItem('theme');
+        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var isDark = stored === 'dark' || (stored === null && prefersDark);
+        var bg = isDark ? '#121212' : '#FFFFFF';
+        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+        document.documentElement.style.backgroundColor = bg;
+        document.documentElement.style.setProperty('--initial-color-mode', isDark ? 'dark' : 'light');
+      } catch(e) {
+        document.documentElement.style.backgroundColor = '#121212';
+      }
+      document.documentElement.style.visibility = 'visible';
+    })();
   `;
-  return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
-};
 
-export const onRenderBody = ( { setPreBodyComponents }) => {
-  setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
+  setHeadComponents([
+    <style
+      key="critical-theme-css"
+      dangerouslySetInnerHTML={{
+        __html: `
+          html {
+            visibility: hidden;
+            background-color: #121212;
+          }
+          html[data-theme="dark"] body {
+            background-color: #121212 !important;
+          }
+          html[data-theme="light"] body {
+            background-color: #FFFFFF !important;
+          }
+        `,
+      }}
+    />,
+    <script
+      key="critical-theme-script"
+      dangerouslySetInnerHTML={{ __html: scriptContent }}
+    />,
+  ]);
 };

src/theme/app/StyledThemeProvider.js

@@ -1,6 +1,3 @@
-//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";
@@ -12,11 +9,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;
   const theme = {
-    ...(didLoad || !isBrowser ? currentTheme : transformTheme(currentTheme)),
+    ...(currentTheme),
   };
 
   return (