fix: theme

2026-08-21 10:18:18 +03:30
parent b4d8e32fdd
commit faf95327f1
4 changed files with 94 additions and 31 deletions
@@ -16,7 +16,7 @@ export const metadata: Metadata = {

 // Runs before paint to set the `.dark` class from saved preference / system,
 // avoiding a light flash on load. Kept inline + minimal on purpose.
-const noFlashTheme = `(function(){try{var t=localStorage.getItem('aram_theme');if(!t){t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}if(t==='dark'){document.documentElement.classList.add('dark');}}catch(e){}})();`;
+const noFlashTheme = `(function(){try{var t=localStorage.getItem('aram_theme');if(t==='dark'||(t!=='light'&&(t='system',window.matchMedia('(prefers-color-scheme: dark)').matches))){document.documentElement.classList.add('dark');}}catch(e){}})();`;

 export default function RootLayout({
  children,
@@ -1,21 +1,33 @@
 "use client";

 import { useTheme } from "@/lib/theme";
-import { SunIcon, MoonIcon } from "./icons";
+import { SunIcon, MoonIcon, MonitorIcon } from "./icons";
+
+const LABELS = {
+  light: "حالت روشن",
+  dark: "حالت تاریک",
+  system: "حالت سیستم",
+};
+
+const ICONS = {
+  light: SunIcon,
+  dark: MoonIcon,
+  system: MonitorIcon,
+};

 export function ThemeToggle({ className }: { className?: string }) {
  const { theme, toggle } = useTheme();
-  const dark = theme === "dark";
+  const Icon = ICONS[theme];

  return (
    <button
      type="button"
      onClick={toggle}
-      aria-label={dark ? "حالت روشن" : "حالت تاریک"}
-      title={dark ? "حالت روشن" : "حالت تاریک"}
+      aria-label={LABELS[theme]}
+      title={LABELS[theme]}
      className={`rounded-lg p-2 text-muted transition hover:bg-surface-muted hover:text-foreground ${className ?? ""}`}
    >
-      {dark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+      <Icon className="h-5 w-5" />
    </button>
  );
 }
@@ -203,3 +203,10 @@ export const UserIcon = (p: IconProps) => (
    <path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
  </svg>
 );
+
+export const MonitorIcon = (p: IconProps) => (
+  <svg {...base(p)}>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <path d="M8 21h8M12 17v4" />
+  </svg>
+);
@@ -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>
  );