add custom hook for dark theme

frontend/src/hooks/index.ts

@@ -64,3 +64,41 @@ export function useMediaQuery() {
 
   return { isMobile, isDesktop, isDarkMode };
 }
+
+export function useDarkTheme() {
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(localStorage.getItem('selectedTheme') === "Dark" || false);
+
+  useEffect(() => {
+    // Check if dark mode preference exists in local storage
+    const savedMode:string | null = localStorage.getItem('selectedTheme');
+
+    // Set dark mode based on local storage preference
+    if (savedMode === 'Dark') {
+      setIsDarkTheme(true);
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    } else {
+      // If no preference found, set to default (light mode)
+      setIsDarkTheme(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+  useEffect(()=>{
+    localStorage.setItem('selectedTheme',isDarkTheme ? 'Dark' : 'Light');
+    if(isDarkTheme){
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    }
+    else{
+      document.documentElement.classList.remove('dark');
+    }
+  })
+
+  // Function to toggle dark mode
+  const toggleTheme:any = () => {
+    setIsDarkTheme(!isDarkTheme)
+    
+  };
+
+  return [isDarkTheme, toggleTheme];
+}