Better theme management

Author: EvModder

website/src/hooks/useTheme.ts

@@ -1,36 +1,46 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-type Theme = "light" | "dark" | "system";
-type ResolvedTheme = "light" | "dark";
+type StoredTheme = "light" | "dark";
+type ResolvedTheme = StoredTheme;
 
 const getSystemTheme = () =>
   matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 
-export function useTheme() {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem("theme") as Theme) ?? "system"
-  );
-  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => getSystemTheme());
+const readStoredTheme = (): StoredTheme | null => {
+  const theme = localStorage.getItem("theme");
+  return theme === "light" || theme === "dark" ? theme : null;
+};
 
-  const resolved = theme === "system" ? systemTheme : theme;
+export function useTheme() {
+  const initialSystemTheme = getSystemTheme();
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(initialSystemTheme);
+  const [override, setOverride] = useState<StoredTheme | null>(() => {
+    const stored = readStoredTheme();
+    return stored === initialSystemTheme ? null : stored;
+  });
+  const resolved = override ?? systemTheme;
 
   useEffect(() => {
     const mq = matchMedia("(prefers-color-scheme: dark)");
-    const onChange = (e: MediaQueryListEvent) => setSystemTheme(e.matches ? "dark" : "light");
-    setSystemTheme(mq.matches ? "dark" : "light");
+    const onChange = (e: MediaQueryListEvent) => {
+      const nextSystemTheme = e.matches ? "dark" : "light";
+      setSystemTheme(nextSystemTheme);
+      setOverride(current => current === nextSystemTheme ? null : current);
+    };
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, []);
 
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.toggle("dark", resolved === "dark");
-
-    if (theme === "system") localStorage.removeItem("theme");
-    else localStorage.setItem("theme", theme);
-  }, [theme, resolved]);
-
-  const toggle = () => setTheme(resolved === "dark" ? "light" : "dark");
+    document.documentElement.classList.toggle("dark", resolved === "dark");
+    if (override) localStorage.setItem("theme", override);
+    else localStorage.removeItem("theme");
+  }, [override, resolved]);
+
+  const toggle = () => {
+    const next = resolved === "dark" ? "light" : "dark";
+    setOverride(next === systemTheme ? null : next);
+  };
 
   return { resolved, toggle } as const;
 }