Fixed to remove flashes on load and on change of dark/light

zoharma · zoharma · commit ceeb4c36fbb7 · 2026-07-02T17:09:46.000+01:00
- Updated load based on direction in Installation guide
- Found that adding  initialisation in HTML helps
- updated button to reduce flashing on both onLoad and reload
diff --git a/dev/index.html b/dev/index.html
@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SciReactUI Dev</title>
+    <!-- Initialise the colour scheme before React loads -->
+    <script>
+      (function () {
+        var mode = localStorage.getItem("mui-mode") || "system";
+        document.documentElement.setAttribute("data-mode", mode);
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/dev/src/main.tsx b/dev/src/main.tsx
@@ -1,9 +1,13 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
+
+import { InitColorSchemeScript } from "@mui/material";
+
 import App from "./App";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    <InitColorSchemeScript attribute="[data-mode='%s']" />
     <App />
   </React.StrictMode>,
 );
diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, IconButtonProps } from "@mui/material";
+import { GlobalStyles, IconButton, IconButtonProps } from "@mui/material";
 import { useColorScheme } from "@mui/material/styles";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import BedtimeIcon from "@mui/icons-material/Bedtime";
@@ -7,30 +7,51 @@ export const ColourSchemeButton = (props: IconButtonProps) => {
   const { mode, systemMode, setMode } = useColorScheme();
 
   const resolvedMode = mode === "system" ? systemMode : mode;
+  const isReady = resolvedMode === "light" || resolvedMode === "dark";
   const isDark = resolvedMode === "dark";
 
   return (
-    <IconButton
-      aria-label={`Colour scheme switcher: ${resolvedMode ?? "unknown"}`}
-      {...props}
-      onClick={(event) => {
-        setMode(isDark ? "light" : "dark");
-        props.onClick?.(event);
-      }}
-      sx={(theme) => ({
-        ml: 1,
-        width: 32,
-        height: 32,
-        borderRadius: 1,
-        backgroundColor: theme.palette.surface.strong,
-        color: theme.palette.text.primary,
-        "&:hover": {
+    <>
+      <GlobalStyles
+        styles={`
+          html.ds-mode-changing *,
+          html.ds-mode-changing *::before,
+          html.ds-mode-changing *::after {
+            transition: none !important;
+            animation: none !important;
+          }
+        `}
+      />
+
+      <IconButton
+        aria-label={`Colour scheme switcher: ${resolvedMode ?? "unknown"}`}
+        {...props}
+        onClick={(event) => {
+          document.documentElement.classList.add("ds-mode-changing");
+
+          setMode(isDark ? "light" : "dark");
+
+          window.setTimeout(() => {
+            document.documentElement.classList.remove("ds-mode-changing");
+          }, 250);
+
+          props.onClick?.(event);
+        }}
+        sx={(theme) => ({
+          ml: 1,
+          width: 32,
+          height: 32,
+          borderRadius: 1,
           backgroundColor: theme.palette.surface.strong,
-          borderColor: theme.palette.border.subtle,
-        },
-      })}
-    >
-      {isDark ? <LightModeIcon /> : <BedtimeIcon />}
-    </IconButton>
+          color: theme.palette.text.primary,
+          "&:hover": {
+            backgroundColor: theme.palette.surface.strong,
+            borderColor: theme.palette.border.subtle,
+          },
+        })}
+      >
+        {isReady ? isDark ? <LightModeIcon /> : <BedtimeIcon /> : null}
+      </IconButton>
+    </>
   );
 };
