diff options
Diffstat (limited to 'subprojects/frontend/src/ToggleDarkModeButton.tsx')
-rw-r--r-- | subprojects/frontend/src/ToggleDarkModeButton.tsx | 13 |
1 files changed, 6 insertions, 7 deletions
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx index 7a835e61..58238cab 100644 --- a/subprojects/frontend/src/ToggleDarkModeButton.tsx +++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx | |||
@@ -7,6 +7,7 @@ | |||
7 | import DarkModeIcon from '@mui/icons-material/DarkMode'; | 7 | import DarkModeIcon from '@mui/icons-material/DarkMode'; |
8 | import LightModeIcon from '@mui/icons-material/LightMode'; | 8 | import LightModeIcon from '@mui/icons-material/LightMode'; |
9 | import IconButton from '@mui/material/IconButton'; | 9 | import IconButton from '@mui/material/IconButton'; |
10 | import Tooltip from '@mui/material/Tooltip'; | ||
10 | import { observer } from 'mobx-react-lite'; | 11 | import { observer } from 'mobx-react-lite'; |
11 | 12 | ||
12 | import { useRootStore } from './RootStoreProvider'; | 13 | import { useRootStore } from './RootStoreProvider'; |
@@ -16,12 +17,10 @@ export default observer(function ToggleDarkModeButton(): JSX.Element { | |||
16 | const { darkMode } = themeStore; | 17 | const { darkMode } = themeStore; |
17 | 18 | ||
18 | return ( | 19 | return ( |
19 | <IconButton | 20 | <Tooltip title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}> |
20 | color="inherit" | 21 | <IconButton color="inherit" onClick={() => themeStore.toggleDarkMode()}> |
21 | onClick={() => themeStore.toggleDarkMode()} | 22 | {darkMode ? <LightModeIcon /> : <DarkModeIcon />} |
22 | aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'} | 23 | </IconButton> |
23 | > | 24 | </Tooltip> |
24 | {darkMode ? <LightModeIcon /> : <DarkModeIcon />} | ||
25 | </IconButton> | ||
26 | ); | 25 | ); |
27 | }); | 26 | }); |