diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx index 51c3b18..a922389 100644 --- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx +++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx | |||
@@ -25,19 +25,23 @@ import { observer } from 'mobx-react-lite'; | |||
25 | import React from 'react'; | 25 | import React from 'react'; |
26 | import { useTranslation } from 'react-i18next'; | 26 | import { useTranslation } from 'react-i18next'; |
27 | 27 | ||
28 | import { useStore } from '../StoreProvider'; | 28 | import type RendererStore from '../../stores/RendererStore'; |
29 | 29 | ||
30 | export default observer(() => { | 30 | function ToggleDarkModeButton({ |
31 | store: { shared }, | ||
32 | }: { | ||
33 | store: RendererStore; | ||
34 | }): JSX.Element { | ||
31 | const { t } = useTranslation(); | 35 | const { t } = useTranslation(); |
32 | const { shared } = useStore(); | ||
33 | const { shouldUseDarkColors } = shared; | ||
34 | 36 | ||
35 | return ( | 37 | return ( |
36 | <IconButton | 38 | <IconButton |
37 | aria-label={t('toolbar.toggleDarkMode')} | 39 | aria-label={t('toolbar.toggleDarkMode')} |
38 | onClick={() => shared.toggleDarkMode()} | 40 | onClick={() => shared.toggleDarkMode()} |
39 | > | 41 | > |
40 | {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} | 42 | {shared.shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} |
41 | </IconButton> | 43 | </IconButton> |
42 | ); | 44 | ); |
43 | }); | 45 | } |
46 | |||
47 | export default observer(ToggleDarkModeButton); | ||