initil

app/hooks/useDarkMode.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useDarkMode() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check if user has a dark mode preference in localStorage
+    const isDark = localStorage.getItem('darkMode') === 'true';
+    // Check system preference if no localStorage value
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    setDarkMode(isDark ?? systemPrefersDark);
+
+    // Add listener for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (localStorage.getItem('darkMode') === null) {
+        setDarkMode(e.matches);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    localStorage.setItem('darkMode', (!darkMode).toString());
+  };
+
+  return { darkMode, toggleDarkMode };
+}