Force light mode on webpage editor

Author: jzongker

src/site/admin/ContentEditor.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useContext, useRef, useCallback } from "react";
 import type { CSSProperties } from "react";
 import { useNavigate } from "react-router-dom";
-import { ThemeProvider, createTheme, useMediaQuery, Container, Skeleton } from "@mui/material";
+import { ThemeProvider, createTheme, CssBaseline, useMediaQuery, Container, Skeleton } from "@mui/material";
 import { useWindowWidth } from "@react-hook/window-size";
 import type { BlockInterface, ElementInterface, PageInterface, SectionInterface, GlobalStyleInterface } from "../../helpers/Interfaces";
 import { ApiHelper, ArrayHelper, UserHelper } from "../../helpers";
@@ -24,6 +24,15 @@ import { ZoneBox } from "./ZoneBox";
 import { EmptyState } from "./EmptyState";
 import { useUndoRedo } from "../hooks/useUndoRedo";
 import { HistoryPanel } from "./HistoryPanel";
+import { useThemeMode } from "../../ThemeContext";
+
+const lightEditorTheme = createTheme({
+  palette: { mode: "light", background: { default: "#e5e8ee", paper: "#ffffff" } },
+  components: {
+    MuiTextField: { defaultProps: { margin: "normal" } },
+    MuiFormControl: { defaultProps: { margin: "normal" } }
+  }
+});
 
 interface ConfigInterface {
   globalStyles?: GlobalStyleInterface;
@@ -81,6 +90,20 @@ export function ContentEditor(props: Props) {
     }
   };
 
+  // Force light mode while editor is mounted so preview matches the public website
+  const { mode } = useThemeMode();
+  useEffect(() => {
+    const wasInDarkMode = document.body.classList.contains("dark-theme");
+    if (wasInDarkMode) {
+      document.body.classList.remove("dark-theme");
+    }
+    return () => {
+      if (wasInDarkMode) {
+        document.body.classList.add("dark-theme");
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const [showAdd, setShowAdd] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const css = StyleHelper.getCss(container?.sections || []);
@@ -374,22 +397,20 @@ export function ContentEditor(props: Props) {
   };
 
   const getTheme = () => {
+    const base = {
+      palette: { mode: "light" as const },
+      components: {
+        MuiTextField: { defaultProps: { margin: "normal" } },
+        MuiFormControl: { defaultProps: { margin: "normal" } }
+      }
+    };
     if (deviceType === "mobile") {
       return createTheme({
-        breakpoints: { values: { xs: 0, sm: 2000, md: 3000, lg: 4000, xl: 5000 } },
-        components: {
-          MuiTextField: { defaultProps: { margin: "normal" } },
-          MuiFormControl: { defaultProps: { margin: "normal" } }
-        }
-      });
-    } else {
-      return createTheme({
-        components: {
-          MuiTextField: { defaultProps: { margin: "normal" } },
-          MuiFormControl: { defaultProps: { margin: "normal" } }
-        }
+        ...base,
+        breakpoints: { values: { xs: 0, sm: 2000, md: 3000, lg: 4000, xl: 5000 } }
       });
     }
+    return createTheme(base);
   };
 
   const getZoneBox = (sections: SectionInterface[], name: string, keyName: string) => (
@@ -420,7 +441,8 @@ export function ContentEditor(props: Props) {
 
   if (!container) {
     return (
-      <>
+      <ThemeProvider theme={lightEditorTheme}>
+        <CssBaseline />
         <Theme globalStyles={props.config?.globalStyles} appearance={props.config?.appearance} />
         <EditorToolbar
           onDone={handleDone}
@@ -450,12 +472,14 @@ export function ContentEditor(props: Props) {
           <Skeleton variant="rectangular" height={200} sx={{ mb: 2, borderRadius: 2 }} animation="wave" />
           <Skeleton variant="rectangular" height={200} sx={{ mb: 2, borderRadius: 2 }} animation="wave" />
         </Container>
-      </>
+      </ThemeProvider>
     );
   }
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "calc(100vh - 64px)", overflow: "hidden" }}>
+    <ThemeProvider theme={lightEditorTheme}>
+    <CssBaseline />
+    <div style={{ display: "flex", flexDirection: "column", height: "calc(100vh - 64px)", overflow: "hidden", backgroundColor: "#e5e8ee" }}>
       <Theme globalStyles={props.config?.globalStyles} appearance={props.config?.appearance} />
       <style>{css}</style>
 
@@ -568,5 +592,6 @@ export function ContentEditor(props: Props) {
         </DndProvider>
       </div>
     </div>
+    </ThemeProvider>
   );
 }