fix: theme

2026-08-21 10:18:18 +03:30
parent b4d8e32fdd
commit faf95327f1
4 changed files with 94 additions and 31 deletions
@@ -1,59 +1,103 @@
 "use client";

-// Light/dark theme state. The actual `.dark` class is set on <html> by an inline
-// script in the root layout (before paint, to avoid a flash) and kept in sync
-// here. Preference persists in localStorage.
+// Light / dark / system theme state. The actual `.dark` class is set on <html>
+// by an inline script in the root layout (before paint) and kept in sync here.
+// Preference persists in localStorage.

 import {
  createContext,
  useCallback,
  useContext,
  useEffect,
+  useRef,
  useState,
 } from "react";

 export const THEME_STORAGE_KEY = "aram_theme";
-type Theme = "light" | "dark";
+export type Theme = "light" | "dark" | "system";

 interface ThemeApi {
  theme: Theme;
+  resolved: "light" | "dark";
  toggle: () => void;
  setTheme: (t: Theme) => void;
 }

 const ThemeContext = createContext<ThemeApi | null>(null);

-function applyClass(theme: Theme) {
-  document.documentElement.classList.toggle("dark", theme === "dark");
+function isSystemDark(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function applyClass(resolved: "light" | "dark") {
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+
+function readStorage(): Theme {
+  if (typeof window === "undefined") return "system";
+  try {
+    const t = localStorage.getItem(THEME_STORAGE_KEY);
+    if (t === "light" || t === "dark" || t === "system") return t;
+  } catch { /* private mode */ }
+  return "system";
+}
+
+function resolve(theme: Theme): "light" | "dark" {
+  return theme === "system" ? (isSystemDark() ? "dark" : "light") : theme;
 }

 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>("light");
+  const [theme, setThemeState] = useState<Theme>("system");
+  const [resolved, setResolved] = useState<"light" | "dark">("light");
+  const mqRef = useRef<MediaQueryList | null>(null);

-  // Read whatever the no-flash script already decided.
+  // Apply theme to <html> and update resolved state.
+  const apply = useCallback((t: Theme) => {
+    const r = resolve(t);
+    applyClass(r);
+    setResolved(r);
+  }, []);
+
+  // On mount: read preference, apply, listen to system changes.
  useEffect(() => {
-    const isDark = document.documentElement.classList.contains("dark");
-    setThemeState(isDark ? "dark" : "light");
-  }, []);
-
-  const setTheme = useCallback((t: Theme) => {
+    const t = readStorage();
    setThemeState(t);
-    applyClass(t);
-    try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, t);
-    } catch {
-      /* ignore (private mode) */
-    }
-  }, []);
+    apply(t);
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mqRef.current = mq;
+
+    const handler = () => {
+      // Re-read theme from state (via ref won't work for closures, so re-read localStorage).
+      const current = readStorage();
+      if (current === "system") {
+        apply("system");
+      }
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [apply]);
+
+  const setTheme = useCallback(
+    (t: Theme) => {
+      setThemeState(t);
+      apply(t);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, t);
+      } catch { /* private mode */ }
+    },
+    [apply],
+  );

  const toggle = useCallback(() => {
-    setTheme(
-      document.documentElement.classList.contains("dark") ? "light" : "dark",
-    );
-  }, [setTheme]);
+    const order: Theme[] = ["light", "dark", "system"];
+    const next = order[(order.indexOf(theme) + 1) % order.length];
+    setTheme(next);
+  }, [theme, setTheme]);

  return (
-    <ThemeContext.Provider value={{ theme, toggle, setTheme }}>
+    <ThemeContext.Provider value={{ theme, resolved, toggle, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );