web: follow system theme changes when no user override

Listen for prefers-color-scheme media query changes and update the
theme automatically when the user hasn't explicitly toggled. Toggling
back to match the system theme clears the stored override.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Aaron

web/src/ThemeContext.tsx

@@ -18,31 +18,60 @@ export function useTheme(): ThemeContextType {
 
 const STORAGE_KEY = "tilt-theme"
 
+function getSystemTheme(): Theme {
+  return window.matchMedia?.("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark"
+}
+
 function getInitialTheme(): Theme {
   const stored = localStorage.getItem(STORAGE_KEY)
   if (stored === "light" || stored === "dark") {
     return stored
   }
-  if (window.matchMedia?.("(prefers-color-scheme: light)").matches) {
-    return "light"
-  }
-  return "dark"
+  return getSystemTheme()
+}
+
+function hasUserOverride(): boolean {
+  return localStorage.getItem(STORAGE_KEY) !== null
 }
 
 export function ThemeProvider(props: PropsWithChildren<{}>) {
   const [theme, setTheme] = useState<Theme>(getInitialTheme)
-
   useEffect(() => {
     if (theme === "light") {
       document.body.setAttribute("data-theme", "light")
     } else {
       document.body.removeAttribute("data-theme")
     }
-    localStorage.setItem(STORAGE_KEY, theme)
   }, [theme])
 
+  // Follow system theme changes when user hasn't explicitly chosen
+  useEffect(() => {
+    const mq = window.matchMedia?.("(prefers-color-scheme: light)")
+    if (!mq) return
+
+    function onChange() {
+      if (!hasUserOverride()) {
+        setTheme(getSystemTheme())
+      }
+    }
+
+    mq.addEventListener("change", onChange)
+    return () => mq.removeEventListener("change", onChange)
+  }, [])
+
   const toggleTheme = useCallback(() => {
-    setTheme((prev) => (prev === "dark" ? "light" : "dark"))
+    setTheme((prev) => {
+      const next = prev === "dark" ? "light" : "dark"
+      // If toggling back to the system theme, clear the override
+      if (next === getSystemTheme()) {
+        localStorage.removeItem(STORAGE_KEY)
+      } else {
+        localStorage.setItem(STORAGE_KEY, next)
+      }
+      return next
+    })
   }, [])
 
   return (