From 4b1a50f1b0325b7f686a190bae35b1a51ca70f02 Mon Sep 17 00:00:00 2001
From: KushalLukhi <kushallukhi@users.noreply.github.com>
Date: Fri, 20 Mar 2026 06:37:13 +0000
Subject: [PATCH] feat(theme): default to system dark mode preference

---
 hooks/useDarkMode.ts | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/hooks/useDarkMode.ts b/hooks/useDarkMode.ts
index ecd6d09f..72b91e48 100644
--- a/hooks/useDarkMode.ts
+++ b/hooks/useDarkMode.ts
@@ -6,14 +6,41 @@ export function useDarkMode() {
   const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
 
   const toggleDarkMode = () => {
-    setIsDarkMode(prev => !prev);
-    /** Persist in local storage */
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(!isDarkMode));
+    setIsDarkMode(prev => {
+      const next = !prev;
+      /** Persist in local storage */
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
   };
 
   useEffect(() => {
     /** Use persisted local storage value if present */
-    setIsDarkMode(JSON.parse(localStorage.getItem(STORAGE_KEY) || "false"));
+    const persisted = localStorage.getItem(STORAGE_KEY);
+    if (persisted !== null) {
+      setIsDarkMode(JSON.parse(persisted));
+      return;
+    }
+
+    /** Fall back to system preference */
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDarkMode(media.matches);
+
+    const onChange = (event: MediaQueryListEvent) => {
+      // Keep auto mode only while no explicit user preference was saved.
+      if (localStorage.getItem(STORAGE_KEY) === null) {
+        setIsDarkMode(event.matches);
+      }
+    };
+
+    if (media.addEventListener) {
+      media.addEventListener("change", onChange);
+      return () => media.removeEventListener("change", onChange);
+    }
+
+    // Backwards compatibility for older browsers.
+    media.addListener(onChange);
+    return () => media.removeListener(onChange);
   }, []);
 
   return { isDarkMode, toggleDarkMode };