refactor: update to v4 of the squonk theme

Author: OliverDudgeon

package.json

@@ -54,7 +54,7 @@
     "@sentry/nextjs": "8.50.0",
     "@squonk/account-server-client": "4.0.0",
     "@squonk/data-manager-client": "3.2.0",
-    "@squonk/mui-theme": "3.0.2",
+    "@squonk/mui-theme": "4.0.0",
     "@squonk/sdf-parser": "1.3.0",
     "@tanstack/match-sorter-utils": "8.19.4",
     "@tanstack/react-query": "5.64.1",

pnpm-lock.yaml

@@ -0,0 +1,43 @@
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";
+import { useColorScheme } from "@mui/material/styles";
+
+/**
+ * Displays a button which controls the theme of the application.
+ */
+export const ColourSchemeSelection = () => {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "background.default",
+        color: "text.primary",
+        borderRadius: 1,
+        p: 3,
+        minHeight: "56px",
+      }}
+    >
+      <FormControl>
+        <FormLabel id="demo-theme-toggle">Theme</FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-theme-toggle"
+          name="theme-toggle"
+          value={mode}
+          onChange={(event) => setMode(event.target.value as "dark" | "light" | "system")}
+        >
+          <FormControlLabel control={<Radio />} label="System" value="system" />
+          <FormControlLabel control={<Radio />} label="Light" value="light" />
+          <FormControlLabel control={<Radio />} label="Dark" value="dark" />
+        </RadioGroup>
+      </FormControl>
+    </Box>
+  );
+};

src/components/ColourSchemeSelection.tsx

@@ -1,14 +1,10 @@
-import { type FC, type ReactNode, useEffect, useState } from "react";
+import { type FC, type ReactNode } from "react";
 
-import { generateThemes } from "@squonk/mui-theme";
+import theme from "@squonk/mui-theme";
 
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 
-import { useColorScheme } from "../../state/colorScheme";
-
-const { darkTheme, lightTheme } = generateThemes();
-
 export interface ThemeProvidersProps {
   children: ReactNode;
 }
@@ -17,22 +13,8 @@ export interface ThemeProvidersProps {
  * Provides the theme for Mui and emotion
  */
 export const ThemeProviders: FC<ThemeProvidersProps> = ({ children }) => {
-  // Color Scheme
-  const [scheme] = useColorScheme();
-  const [theme, setTheme] = useState(lightTheme);
-
-  // Set the theme client-side since we don't know whether the user has dark mode enabled in their
-  // localStorage
-  useEffect(() => {
-    if (scheme === "dark") {
-      setTheme(darkTheme);
-    } else {
-      setTheme(lightTheme);
-    }
-  }, [scheme]);
-
   return (
-    <MuiThemeProvider theme={theme}>
+    <MuiThemeProvider defaultMode="light" theme={theme}>
       <CssBaseline />
       {children}
     </MuiThemeProvider>

src/components/DarkModeSwitch.tsx

@@ -1,8 +1,8 @@
+import { useColorScheme } from "@mui/material";
 import Image from "next/image";
 
 import logo from "../../../assets/graphics/app-logos/data-manager.svg";
 import logoWhite from "../../../assets/graphics/app-logos/data-manager-white-tear-variant.svg";
-import { useColorScheme } from "../../state/colorScheme";
 
 export interface LogoImageProps {
   variant?: "dark" | "light";
@@ -11,13 +11,9 @@ export interface LogoImageProps {
 const alt = "Squonk (animal) logo with title text 'Squonk' and subtitle 'Data Manager'";
 
 export const LogoImage = ({ variant }: LogoImageProps) => {
-  const [scheme] = useColorScheme();
+  const { mode } = useColorScheme();
 
-  if (variant === undefined) {
-    variant = scheme;
-  }
-
-  return variant === "dark" ? (
+  return (variant ?? mode) === "dark" ? (
     <Image priority alt={alt} height="60" src={logoWhite} width="206" />
   ) : (
     <Image priority alt={alt} height="60" src={logo} width="206" />

src/components/app/ThemeProviders.tsx

@@ -4,7 +4,7 @@ import { Alert, Box, Chip, Typography, useMediaQuery, useTheme } from "@mui/mate
 import { AuthButton } from "../../components/auth/AuthButton";
 import { CenterLoader } from "../../components/CenterLoader";
 import { Chips } from "../../components/Chips";
-import { DarkModeSwitch } from "../../components/DarkModeSwitch";
+import { ColourSchemeSelection } from "../../components/ColourSchemeSelection";
 import { useASAuthorizationStatus, useDMAuthorizationStatus } from "../../hooks/useIsAuthorized";
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
 
@@ -21,7 +21,7 @@ export const UserMenuContent = () => {
         Account
       </Typography>
       <UserMenuContentInner />
-      <DarkModeSwitch />
+      <ColourSchemeSelection />
     </Box>
   );
 };