From 0fcd008b7938e2de3fb967157877ef905523196d Mon Sep 17 00:00:00 2001
From: Zohar Manor-Abel <zohar.manor-abel@diamond.ac.uk>
Date: Fri, 3 Jul 2026 12:07:15 +0100
Subject: [PATCH 1/2] Update transition animation through ColourSchemeButton

---
 .../controls/ColourSchemeButton.tsx           | 62 ++++++++++++-------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx
index 6f80ddc3..fa4e2ddb 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";
@@ -14,27 +14,45 @@ export const ColourSchemeButton = (props: IconButtonProps) => {
   }
 
   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,
+          },
+        })}
+      >
+        {isDark ? <LightModeIcon /> : <BedtimeIcon />}
+      </IconButton>
+    </>
   );
 };

From 18efe947ecc2fdca3c4cd716e42c064f3cf5a704 Mon Sep 17 00:00:00 2001
From: Zohar Manor-Abel <zohar.manor-abel@diamond.ac.uk>
Date: Fri, 10 Jul 2026 18:41:26 +0100
Subject: [PATCH 2/2] Move colour scheme transition suppression to
 ThemeProvider

---
 .../controls/ColourSchemeButton.tsx           | 75 ++++++++-----------
 src/themes/ThemeProvider.tsx                  | 18 ++++-
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx
index fa4e2ddb..7ae9aa28 100644
--- a/src/components/controls/ColourSchemeButton.tsx
+++ b/src/components/controls/ColourSchemeButton.tsx
@@ -1,4 +1,4 @@
-import { GlobalStyles, IconButton, IconButtonProps } from "@mui/material";
+import { 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,52 +7,43 @@ export const ColourSchemeButton = (props: IconButtonProps) => {
   const { mode, systemMode, setMode } = useColorScheme();
 
   const resolvedMode = mode === "system" ? systemMode : mode;
-  const isDark = resolvedMode === "dark";
 
-  if (resolvedMode === undefined) {
+  if (resolvedMode !== "light" && resolvedMode !== "dark") {
     return null;
   }
 
+  const isDark = resolvedMode === "dark";
+
   return (
-    <>
-      <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,
+    <IconButton
+      aria-label={`Colour scheme switcher: ${resolvedMode}`}
+      {...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,
+        color: theme.palette.text.primary,
+
+        "&:hover": {
           backgroundColor: theme.palette.surface.strong,
-          color: theme.palette.text.primary,
-          "&:hover": {
-            backgroundColor: theme.palette.surface.strong,
-            borderColor: theme.palette.border.subtle,
-          },
-        })}
-      >
-        {isDark ? <LightModeIcon /> : <BedtimeIcon />}
-      </IconButton>
-    </>
+          borderColor: theme.palette.border.subtle,
+        },
+      })}
+    >
+      {isDark ? <LightModeIcon /> : <BedtimeIcon />}
+    </IconButton>
   );
 };
diff --git a/src/themes/ThemeProvider.tsx b/src/themes/ThemeProvider.tsx
index 56fd254f..10d9ec1c 100644
--- a/src/themes/ThemeProvider.tsx
+++ b/src/themes/ThemeProvider.tsx
@@ -1,6 +1,8 @@
-import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { CssBaseline } from "@mui/material";
-import { ThemeProviderProps as MuiThemeProviderProps } from "@mui/material/styles";
+import { CssBaseline, GlobalStyles } from "@mui/material";
+import {
+  ThemeProvider as MuiThemeProvider,
+  ThemeProviderProps as MuiThemeProviderProps,
+} from "@mui/material/styles";
 import { DiamondDSTheme } from "./DiamondDSTheme";
 
 interface ThemeProviderProps extends Partial<MuiThemeProviderProps> {
@@ -17,6 +19,16 @@ const ThemeProvider = function ({
   return (
     <MuiThemeProvider theme={theme} defaultMode={defaultMode} {...props}>
       {baseline && <CssBaseline />}
+
+      <GlobalStyles
+        styles={{
+          "html.ds-mode-changing *, html.ds-mode-changing *::before, html.ds-mode-changing *::after":
+            {
+              transition: "none !important",
+            },
+        }}
+      />
+
       {children}
     </MuiThemeProvider>
   );