feat(frontend): light/dark mode switch

1 files changed, 24 insertions, 0 deletions

diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
new file mode 100644
index 00000000..1685ec80
--- /dev/null
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -0,0 +1,24 @@
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import IconButton from '@mui/material/IconButton';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useRootStore } from './RootStore';
+
+function ToggleDarkModeButton(): JSX.Element {
+  const { themeStore } = useRootStore();
+  const { darkMode } = themeStore;
+
+  return (
+    <IconButton
+      color="inherit"
+      onClick={() => themeStore.toggleDarkMode()}
+      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+    </IconButton>
+  );
+}
+
+export default observer(ToggleDarkModeButton);