Add custom fancy theme...that's ugly a.f.

src/components/App.tsx

@@ -1,24 +1,15 @@
 import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/material/styles";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useMemo } from "react";
-import { useDarkMode } from "usehooks-ts";
+import { useMuiThemeSelection } from "../hooks/useMuiThemeSelection";
 import { ConfigView } from "./ConfigView/ConfigView";
 import { StreakView } from "./StreakView/StreakView";
 
 const queryClient = new QueryClient();
 
 export const App = () => {
-  const { isDarkMode } = useDarkMode();
-
-  const theme = useMemo(() => {
-    return createTheme({
-      palette: {
-        mode: isDarkMode ? "dark" : "light",
-      },
-    });
-  }, [isDarkMode]);
+  const { theme } = useMuiThemeSelection();
 
   return (
     <ThemeProvider theme={theme}>

src/components/ConfigView/ToggleThemeButton/ToggleThemeButton.tsx

@@ -1,14 +1,35 @@
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
-import { IconButton } from "@mui/material";
-import { useDarkMode } from "usehooks-ts";
+import LooksIcon from "@mui/icons-material/Looks";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { useMuiThemeSelection } from "../../../hooks/useMuiThemeSelection";
 
 export const ToggleThemeButton = () => {
-  const { isDarkMode, toggle } = useDarkMode();
+  const { theme, setSelectedTheme } = useMuiThemeSelection();
+
+  const handleThemeChange = (
+    _event: React.MouseEvent<HTMLElement>,
+    newTheme: string,
+  ) => {
+    setSelectedTheme(newTheme);
+  };
 
   return (
-    <IconButton color="inherit" onClick={toggle}>
-      {isDarkMode ? <Brightness7Icon /> : <Brightness4Icon />}
-    </IconButton>
+    <ToggleButtonGroup
+      value={theme.name}
+      exclusive
+      onChange={handleThemeChange}
+      aria-label="theme selection"
+    >
+      <ToggleButton value="light" aria-label="light theme">
+        <Brightness4Icon />
+      </ToggleButton>
+      <ToggleButton value="dark" aria-label="dark theme">
+        <Brightness7Icon />
+      </ToggleButton>
+      <ToggleButton value="fancy" aria-label="fancy theme">
+        <LooksIcon />
+      </ToggleButton>
+    </ToggleButtonGroup>
   );
 };

src/hooks/useMuiThemeSelection.ts

@@ -0,0 +1,65 @@
+import { Theme, createTheme } from "@mui/material";
+import { useMemo } from "react";
+import { useLocalStorage } from "usehooks-ts";
+
+const LOCAL_STORAGE_KEY = "theme";
+const FANCY_COLOR = "#ff69b4";
+type NamedTheme = Theme & { name: string };
+
+export function useMuiThemeSelection() {
+  // By default we're using the dark theme cause it's cool
+  const [selectedTheme, setSelectedTheme] = useLocalStorage(
+    LOCAL_STORAGE_KEY,
+    "dark",
+  );
+
+  const theme = useMemo<NamedTheme>(() => {
+    switch (selectedTheme) {
+      case "dark":
+        return darkTheme();
+      case "fancy":
+        return fancyTheme();
+      case "light":
+      default:
+        return lightTheme();
+    }
+  }, [selectedTheme]);
+
+  return { theme, setSelectedTheme };
+}
+
+const lightTheme = (): NamedTheme => {
+  const theme = createTheme({
+    palette: {
+      mode: "light",
+    },
+  });
+  return { ...theme, name: "light" };
+};
+
+const darkTheme = (): NamedTheme => {
+  const theme = createTheme({
+    palette: {
+      mode: "dark",
+    },
+  });
+  return { ...theme, name: "dark" };
+};
+
+const fancyTheme = (): NamedTheme => {
+  const theme = createTheme({
+    palette: {
+      mode: "dark",
+      primary: {
+        main: FANCY_COLOR,
+      },
+      secondary: {
+        main: FANCY_COLOR,
+      },
+      text: {
+        primary: FANCY_COLOR,
+      },
+    },
+  });
+  return { ...theme, name: "fancy" };
+};