allow switching theme modes

Author: forman

chartlets.js/packages/demo/src/App.tsx

@@ -1,5 +1,10 @@
-import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
-import Typography from "@mui/material/Typography";
+import { useMemo, useState } from "react";
+import {
+  CssBaseline,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
+} from "@mui/material";
 
 import { initializeContributions } from "chartlets";
 import mui from "chartlets/plugins/mui";
@@ -10,6 +15,7 @@ import ExtensionsInfo from "./components/ExtensionInfo";
 import ControlBar from "./components/ControlBar";
 import PanelsControl from "./components/PanelsControl";
 import PanelsRow from "./components/PanelsRow";
+import Header, { type Mode } from "./components/Header";
 
 initializeContributions({
   plugins: [mui(), vega()],
@@ -28,27 +34,35 @@ initializeContributions({
   logging: { enabled: true },
 });
 
-// MUI's default font family
+// Material Design default font families
 const fontFamily = "Roboto, Arial, sans-serif";
 
-const theme = createTheme({
-  typography: { fontFamily },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        "*": { fontFamily },
-      },
-    },
-  },
-});
-
 function App() {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const systemMode = prefersDarkMode ? "dark" : "light";
+  const [mode, setMode] = useState<Mode>(systemMode);
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: mode === "system" ? systemMode : mode,
+        },
+        typography: { fontFamily },
+        components: {
+          MuiCssBaseline: {
+            styleOverrides: {
+              "*": { fontFamily },
+            },
+          },
+        },
+      }),
+    [mode, systemMode],
+  );
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Typography fontSize="3em" fontWeight="bold">
-        Chartlets Demo
-      </Typography>
+      <Header mode={mode} setMode={setMode} />
       <ExtensionsInfo />
       <ControlBar />
       <PanelsControl />

chartlets.js/packages/demo/src/components/Header.tsx

@@ -0,0 +1,33 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+
+export type Mode = "dark" | "light" | "system";
+const modes: Mode[] = ["dark", "light", "system"];
+
+interface HeaderProps {
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+}
+
+function Header({ mode, setMode }: HeaderProps) {
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+      <Typography fontSize="3em" fontWeight="bold">
+        Chartlets Demo
+      </Typography>
+      <Button
+        onClick={() => {
+          const nextMode = modes[(modes.findIndex((m) => m === mode) + 1) % 3];
+          setMode(nextMode);
+        }}
+        variant="contained"
+        size="small"
+      >
+        {mode}
+      </Button>
+    </Box>
+  );
+}
+
+export default Header;