From 84b61b9d4ba141e83fa2c5ccafd0f1d85ce355b5 Mon Sep 17 00:00:00 2001
From: Val Redchenko <val.redchenko@diamond.ac.uk>
Date: Wed, 4 Feb 2026 14:11:44 +0000
Subject: [PATCH] Fix dark mode colour scheme selector (#130)

Change colorSchemeSelector from "class" to "data-mode" so that toggling
dark mode updates the data-mode attribute and color-scheme CSS property
on the root element, not just the CSS class.
---
 src/themes/BaseTheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/BaseTheme.ts b/src/themes/BaseTheme.ts
index 3c346b8..52c40cf 100644
--- a/src/themes/BaseTheme.ts
+++ b/src/themes/BaseTheme.ts
@@ -19,7 +19,7 @@ declare module "@mui/material/styles" {
 
 const BaseThemeOptions /* : ThemeOptions */ = {
   cssVariables: {
-    colorSchemeSelector: "class",
+    colorSchemeSelector: "data-mode",
   },
   typography: {
     fontSize: 14,