diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx
index 6f80ddc..fa4e2dd 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>
+    </>
   );
 };