From 7b3f85b5a03c8fa8fc04d7876fb53cbf4ff0aa7d Mon Sep 17 00:00:00 2001 From: Zohar Manor-Abel Date: Thu, 2 Jul 2026 12:09:13 +0100 Subject: [PATCH] Fixed to remove flashes on load and on change of dark/light - 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 --- dev/index.html | 7 ++ dev/src/main.tsx | 4 ++ .../controls/ColourSchemeButton.tsx | 65 ++++++++++++------- 3 files changed, 54 insertions(+), 22 deletions(-) diff --git a/dev/index.html b/dev/index.html index e76e076b..2a89f1ad 100644 --- a/dev/index.html +++ b/dev/index.html @@ -4,6 +4,13 @@ SciReactUI Dev + +
diff --git a/dev/src/main.tsx b/dev/src/main.tsx index f5d6adea..bf7de4b1 100644 --- 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( + , ); diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx index 68c97dfc..2d3c6141 100644 --- 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 ( - { - 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": { + <> + + + { + 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 ? : } - + color: theme.palette.text.primary, + "&:hover": { + backgroundColor: theme.palette.surface.strong, + borderColor: theme.palette.border.subtle, + }, + })} + > + {isReady ? isDark ? : : null} + + ); };