From 1a99fb826592286eaa0c79857d6710771407b2fe Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Sat, 11 Jan 2025 14:19:40 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat:=20determining=20the=20init?=
 =?UTF-8?q?ial=20theme=20is=20encapsulated=20in=20a=20separate=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useTheme.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 154c1d9..80f11dc 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -3,11 +3,13 @@ import { useState, useEffect } from 'react';
 type Theme = 'light' | 'dark';
 
 export function useTheme() {
-  const [theme, setTheme] = useState<Theme>(() => {
-    const savedTheme = localStorage.getItem('theme');
+  const getInitialTheme = (): Theme => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
     if (savedTheme === 'dark' || savedTheme === 'light') return savedTheme;
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  });
+  };
+
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
 
   useEffect(() => {
     const root = window.document.documentElement;
@@ -17,8 +19,22 @@ export function useTheme() {
   }, [theme]);
 
   const toggleTheme = () => {
-    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
   };
 
+  useEffect(() => {
+    const handleMediaChange = (event: MediaQueryListEvent) => {
+      setTheme(event.matches ? 'dark' : 'light');
+    };
+
+    const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQueryList.addEventListener('change', handleMediaChange);
+
+    // Cleanup listener on unmount
+    return () => {
+      mediaQueryList.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+
   return { theme, toggleTheme };
 }
\ No newline at end of file