diff options
Diffstat (limited to 'subprojects/frontend/src/ToggleDarkModeButton.tsx')
-rw-r--r-- | subprojects/frontend/src/ToggleDarkModeButton.tsx | 24 |
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 @@ | |||
1 | import DarkModeIcon from '@mui/icons-material/DarkMode'; | ||
2 | import LightModeIcon from '@mui/icons-material/LightMode'; | ||
3 | import IconButton from '@mui/material/IconButton'; | ||
4 | import { observer } from 'mobx-react-lite'; | ||
5 | import React from 'react'; | ||
6 | |||
7 | import { useRootStore } from './RootStore'; | ||
8 | |||
9 | function ToggleDarkModeButton(): JSX.Element { | ||
10 | const { themeStore } = useRootStore(); | ||
11 | const { darkMode } = themeStore; | ||
12 | |||
13 | return ( | ||
14 | <IconButton | ||
15 | color="inherit" | ||
16 | onClick={() => themeStore.toggleDarkMode()} | ||
17 | aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'} | ||
18 | > | ||
19 | {darkMode ? <LightModeIcon /> : <DarkModeIcon />} | ||
20 | </IconButton> | ||
21 | ); | ||
22 | } | ||
23 | |||
24 | export default observer(ToggleDarkModeButton); | ||