From 7299dca492ac140ab387d0454014ea284a39a44e Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Fri, 9 May 2025 13:43:01 -0500
Subject: [PATCH 1/2] Enhance theme initialization and dark mode handling in
 HTML and ThemeManager components

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 src/html.js                          | 54 ++++++++++++++++++++--------
 src/theme/app/StyledThemeProvider.js |  8 ++++-
 src/theme/app/ThemeManager.js        | 23 ++++++++++--
 3 files changed, 67 insertions(+), 18 deletions(-)
diff --git a/src/html.js b/src/html.js
index d10c848d7f944..f6168b0d61ea4 100644
--- a/src/html.js
+++ b/src/html.js
@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-
 export default function HTML(props) {
   return (
     <html lang="en" {...props.htmlAttributes}>
@@ -24,20 +23,45 @@ export default function HTML(props) {
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>
-        <script dangerouslySetInnerHTML={{
-          __html:
-            `(function() {
-							try {
-                var banner = sessionStorage.getItem('banner');
-                if (banner === null)
-                  document.body.classList.add('banner1');
-                else
-                  document.body.classList.add('banner' + banner);
-							} catch (e) {
-								return;
-							}
-					})();`,
-        }}
+        {/* Script for theme initialization - needs to run before React renders to prevent flicker */}
+        <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)
+                    document.body.classList.add('banner1');
+                  else
+                    document.body.classList.add('banner' + banner);
+                } catch (e) {
+                  console.error('Error in theme initialization:', e);
+                }
+              })();
+            `,
+          }}
         />
         {props.preBodyComponents}
         <div
diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index de3e682b7eae1..8caa4856908f9 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -5,12 +5,18 @@ 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)),
+    ...(didLoad || !isBrowser ? currentTheme : transformTheme(currentTheme)),
   };
 
   return (
diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index f8687705a016c..ef652b4cad4e6 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -22,8 +22,11 @@ const defaultState = {
 
 export const ThemeManagerContext = createContext(defaultState);
 
+// Safe check for browser environment
+const isBrowser = typeof window !== "undefined";
+
 const systemDarkModeSetting = () =>
-  window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  isBrowser && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
 const isDarkModeActive = () => {
   // Assume that dark mode is not active if there's no system dark mode setting available
   return !!systemDarkModeSetting()?.matches;
@@ -36,15 +39,29 @@ export const ThemeManagerProvider = (props) => {
   const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
+    if (!isBrowser) return;
+
     const root = window.document.documentElement;
     const initialColorValue = root.style.getPropertyValue(
       "--initial-color-mode"
     );
     setIsDark(initialColorValue === ThemeSetting.DARK);
     setDidLoad(true);
-  }, []);
+
+    // Add listener for system color scheme changes
+    const darkModeMediaQuery = systemDarkModeSetting();
+    if (darkModeMediaQuery && themeSetting === ThemeSetting.SYSTEM) {
+      const handleChange = (e) => {
+        setIsDark(e.matches);
+      };
+      darkModeMediaQuery.addEventListener('change', handleChange);
+      return () => darkModeMediaQuery.removeEventListener('change', handleChange);
+    }
+  }, [themeSetting]);
 
   const toggleDark = (value) => {
+    if (!isBrowser) return;
+
     const newIsDark = value ?? !isDark;
     const theme = newIsDark ? ThemeSetting.DARK : ThemeSetting.LIGHT;
     setIsDark(newIsDark);
@@ -53,6 +70,8 @@ export const ThemeManagerProvider = (props) => {
   };
 
   const changeThemeSetting = (setting) => {
+    if (!isBrowser) return;
+
     switch (setting) {
       case ThemeSetting.SYSTEM: {
         setIsDark(isDarkModeActive());

From d9d01c4ba4b8d78e2d37b35418071b4be481f212 Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Fri, 9 May 2025 13:43:21 -0500
Subject: [PATCH 2/2] Refactor event listener syntax for dark mode media query
 in ThemeManager

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 src/theme/app/StyledThemeProvider.js | 2 +-
 src/theme/app/ThemeManager.js        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/theme/app/StyledThemeProvider.js b/src/theme/app/StyledThemeProvider.js
index 8caa4856908f9..5a396f3d18c68 100644
--- a/src/theme/app/StyledThemeProvider.js
+++ b/src/theme/app/StyledThemeProvider.js
@@ -11,7 +11,7 @@ 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;
diff --git a/src/theme/app/ThemeManager.js b/src/theme/app/ThemeManager.js
index ef652b4cad4e6..88913bc8c43ca 100644
--- a/src/theme/app/ThemeManager.js
+++ b/src/theme/app/ThemeManager.js
@@ -54,8 +54,8 @@ export const ThemeManagerProvider = (props) => {
       const handleChange = (e) => {
         setIsDark(e.matches);
       };
-      darkModeMediaQuery.addEventListener('change', handleChange);
-      return () => darkModeMediaQuery.removeEventListener('change', handleChange);
+      darkModeMediaQuery.addEventListener("change", handleChange);
+      return () => darkModeMediaQuery.removeEventListener("change", handleChange);
     }
   }, [themeSetting]);
 
