From 35f458622945d191576666a5accd4ca3741c1295 Mon Sep 17 00:00:00 2001
From: Dominik Hryshaiev <domhryshaiev@gmail.com>
Date: Thu, 8 Feb 2024 22:00:06 +0200
Subject: [PATCH] More theme related fixes

---
 src/components/header/ThemeToggle.tsx | 12 +++-------
 src/hooks/useTheme.ts                 | 32 +++++++++++++++++++++------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/header/ThemeToggle.tsx b/src/components/header/ThemeToggle.tsx
index 429a10c..a98a828 100644
--- a/src/components/header/ThemeToggle.tsx
+++ b/src/components/header/ThemeToggle.tsx
@@ -1,23 +1,17 @@
 import { ThemeModes, useTheme } from '@hooks';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
 import NightlightRoundRoundedIcon from '@mui/icons-material/NightlightRoundRounded';
-import { Button, useColorScheme } from '@mui/joy';
 import React from 'react';
 
 import { StyledToggleModeIconButton } from './styled';
 
 const ThemeToggle = () => {
-  useTheme();
-  const { mode, setMode } = useColorScheme();
-
-  const handleToggleMode = () => {
-    setMode(mode === ThemeModes.LIGHT ? ThemeModes.DARK : ThemeModes.LIGHT);
-  };
+  const { theme, toggleTheme } = useTheme();
 
   return (
     <>
-      <StyledToggleModeIconButton onClick={handleToggleMode}>
-        {mode === ThemeModes.LIGHT ? (
+      <StyledToggleModeIconButton onClick={toggleTheme}>
+        {theme === ThemeModes.LIGHT ? (
           <NightlightRoundRoundedIcon />
         ) : (
           <LightModeRoundedIcon />
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index b7e9ab6..bb9bddb 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -10,11 +10,20 @@ export enum ThemeModes {
 
 const useTheme = () => {
   const { setMode } = useColorScheme();
-  const [theme, setTheme] = React.useState<ThemeModes>(ThemeModes.LIGHT);
+  const [theme, setTheme] = React.useState<ThemeModes>();
+  console.log({ theme });
 
-  const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const toggleTheme = () => {
+    setTheme((prevTheme) =>
+      prevTheme === ThemeModes.LIGHT ? ThemeModes.DARK : ThemeModes.LIGHT
+    );
+  };
 
   React.useEffect(() => {
+    const darkThemeMediaQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    );
+
     const userTheme = localStorage.getItem(
       USER_THEME_STORAGE_KEY
     ) as ThemeModes | null;
@@ -26,7 +35,19 @@ const useTheme = () => {
         darkThemeMediaQuery.matches ? ThemeModes.DARK : ThemeModes.LIGHT
       );
     }
-  }, [darkThemeMediaQuery.matches]);
+
+    const eventListener = (mediaQueryListEvent: MediaQueryListEvent) => {
+      setTheme(
+        mediaQueryListEvent.matches ? ThemeModes.DARK : ThemeModes.LIGHT
+      );
+    };
+
+    darkThemeMediaQuery.addEventListener('change', eventListener);
+
+    return () => {
+      darkThemeMediaQuery.removeEventListener('change', eventListener);
+    };
+  }, []);
 
   React.useEffect(() => {
     if (theme) {
@@ -35,12 +56,9 @@ const useTheme = () => {
     }
   }, [theme, setMode]);
 
-  darkThemeMediaQuery.addEventListener('change', (mediaQueryListEvent) => {
-    setTheme(mediaQueryListEvent.matches ? ThemeModes.DARK : ThemeModes.LIGHT);
-  });
-
   return {
     theme,
+    toggleTheme,
   };
 };