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';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useStore } from '../StoreProvider';
+import type RendererStore from '../../stores/RendererStore';
 
-export default observer(() => {
+function ToggleDarkModeButton({
+  store: { shared },
+}: {
+  store: RendererStore;
+}): JSX.Element {
   const { t } = useTranslation();
-  const { shared } = useStore();
-  const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
       aria-label={t('toolbar.toggleDarkMode')}
       onClick={() => shared.toggleDarkMode()}
     >
-      {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
+      {shared.shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
   );
-});
+}
+
+export default observer(ToggleDarkModeButton);