fix: theme

app/dashboard/music/playlists/page.tsx

@@ -6,6 +6,7 @@ import { useList } from "@/lib/useResource";
 import { useToast } from "@/components/toast";
 import { DataTable, type Column } from "@/components/DataTable";
 import {
+  Badge,
   Button,
   ConfirmDialog,
   Field,
@@ -13,6 +14,7 @@ import {
   Textarea,
   Modal,
   PageHeader,
+  Switch,
 } from "@/components/ui";
 import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
 import { ImagePicker } from "@/components/ImagePicker";
@@ -28,6 +30,7 @@ interface Playlist {
   image?: unknown;
   detail_image_id?: number | null;
   detail_image?: unknown;
+  is_premium?: boolean;
 }
 
 interface MusicCategory {
@@ -53,6 +56,7 @@ export default function MusicPlaylistsPage() {
   const [imageFile, setImageFile] = useState<File | null>(null);
   const [detailImageId, setDetailImageId] = useState<number | null>(null);
   const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
+  const [isPremium, setIsPremium] = useState(false);
 
   const [deleting, setDeleting] = useState<Playlist | null>(null);
   const [removing, setRemoving] = useState(false);
@@ -71,6 +75,7 @@ export default function MusicPlaylistsPage() {
     setImageFile(null);
     setDetailImageId(null);
     setDetailImageFile(null);
+    setIsPremium(false);
     setOpen(true);
   }
   function openEdit(row: Playlist) {
@@ -83,6 +88,7 @@ export default function MusicPlaylistsPage() {
     setImageFile(null);
     setDetailImageId(row.detail_image_id ?? null);
     setDetailImageFile(null);
+    setIsPremium(row.is_premium ?? false);
     setOpen(true);
   }
 
@@ -101,6 +107,7 @@ export default function MusicPlaylistsPage() {
             image: imageFile,
             detail_image_id: detailImageId,
             detail_image: detailImageFile,
+            is_premium: isPremium,
           }),
         });
         toast.success("پلی‌لیست ویرایش شد.");
@@ -117,6 +124,7 @@ export default function MusicPlaylistsPage() {
             image: imageFile,
             detail_image_id: detailImageId,
             detail_image: detailImageFile,
+            is_premium: isPremium,
           }),
         });
         toast.success("پلی‌لیست افزوده شد.");
@@ -161,6 +169,17 @@ export default function MusicPlaylistsPage() {
       header: "توضیحات",
       render: (r) => r.description ?? "—",
     },
+    {
+      key: "is_premium",
+      header: "ویژه",
+      className: "w-20",
+      render: (r) =>
+        r.is_premium ? (
+          <Badge tone="primary">ویژه</Badge>
+        ) : (
+          <Badge tone="neutral">رایگان</Badge>
+        ),
+    },
   ];
 
   return (
@@ -257,6 +276,8 @@ export default function MusicPlaylistsPage() {
             />
           </Field>
 
+          <Switch checked={isPremium} onChange={setIsPremium} label="ویژه (پرمیوم)" />
+
           {!editing && (
             <>
               <Field label="دسته‌بندی‌ها">

app/dashboard/users/page.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useState } from "react";
+import { apiFetch, getApproToken } from "@/lib/api";
+import { APPRO_BASE_URL, MEDITATION_BASE_URL } from "@/lib/config";
+import { usePaginated } from "@/lib/useResource";
+import { DataTable, type Column } from "@/components/DataTable";
+import {
+  Badge,
+  Button,
+  Card,
+  Modal,
+  PageHeader,
+  Pagination,
+  Select,
+  Spinner,
+} from "@/components/ui";
+import { EyeIcon } from "@/components/icons";
+import { toFa } from "@/lib/utils";
+
+interface MeditationUser {
+  id: number;
+  full_name?: string;
+  first_name?: string;
+  last_name?: string;
+  age?: number | null;
+  gender?: number | null;
+  email?: string | null;
+  mobile?: string | null;
+  identifier?: string | null;
+  created_at?: string;
+  answers_count?: number;
+  questions_answered?: number;
+}
+
+interface ApproUser {
+  id: number;
+  uuid?: string;
+  first_name?: string;
+  last_name?: string;
+  full_name?: string;
+  age?: number | null;
+  gender?: number | null;
+  email?: string | null;
+  mobile?: string | null;
+  birthday?: string | null;
+  created_at?: string;
+}
+
+interface SurveyAnswerItem {
+  question_id: number;
+  question?: string;
+  type?: string;
+  answers: { option_id: number; label: string }[];
+}
+
+interface DetailData {
+  appro: ApproUser | null;
+  survey_answers: SurveyAnswerItem[];
+  answers_count?: number;
+  questions_answered?: number;
+}
+
+const GENDER_LABELS: Record<number, string> = {
+  1: "مرد",
+  2: "زن",
+};
+
+function faDate(value?: string): string {
+  if (!value) return "—";
+  try {
+    return toFa(new Date(value).toLocaleDateString("fa-IR"));
+  } catch {
+    return "—";
+  }
+}
+
+export default function UsersPage() {
+  const [answered, setAnswered] = useState<string>("");
+  const { data, meta, page, setPage, loading, error, reload } =
+    usePaginated<MeditationUser>("/admin/survey-users", {
+      perPage: 20,
+      query: answered ? { answered } : undefined,
+    });
+
+  const [detailUser, setDetailUser] = useState<MeditationUser | null>(null);
+  const [detailData, setDetailData] = useState<DetailData | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  async function openDetail(user: MeditationUser) {
+    setDetailOpen(true);
+    setDetailLoading(true);
+    setDetailUser(user);
+    setDetailData(null);
+
+    const [appro, survey] = await Promise.all([
+      user.mobile
+        ? apiFetch<{ data: ApproUser[] }>("/admin/users", {
+            query: { mobile: user.mobile, per_page: 1 },
+            baseUrl: APPRO_BASE_URL,
+            headers: { Authorization: `Bearer ${getApproToken()}` },
+          }).then((r) => r.data?.[0] ?? null)
+        : Promise.resolve(null),
+      apiFetch<{ survey_answers: SurveyAnswerItem[]; answers_count?: number; questions_answered?: number }>(
+        `/admin/survey-users/${user.identifier || user.id}`,
+        { baseUrl: MEDITATION_BASE_URL },
+      ).catch(() => ({ survey_answers: [], answers_count: undefined, questions_answered: undefined })),
+    ]);
+
+    // Sync approagency data back to meditation DB if user has null fields
+    if (appro && user.mobile && (!user.first_name || user.age == null || user.gender == null)) {
+      apiFetch(`/admin/survey-users/${user.identifier || user.id}`, {
+        method: "PATCH",
+        baseUrl: MEDITATION_BASE_URL,
+        body: {
+          first_name: appro.first_name,
+          last_name: appro.last_name,
+          age: appro.age,
+          gender: appro.gender,
+          birthday: appro.birthday,
+          identifier: appro.uuid,
+          email: appro.email,
+        },
+      }).catch(() => {}); // fire-and-forget
+    }
+
+    setDetailData({
+      appro,
+      survey_answers: survey.survey_answers ?? [],
+      answers_count: survey.answers_count,
+      questions_answered: survey.questions_answered,
+    });
+    setDetailLoading(false);
+  }
+
+  const columns: Column<MeditationUser>[] = [
+    { key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-20" },
+    {
+      key: "full_name",
+      header: "نام",
+      render: (r) => r.full_name || [r.first_name, r.last_name].filter(Boolean).join(" ") || "—",
+    },
+    {
+      key: "questions_answered",
+      header: "پاسخ به سوالات",
+      className: "w-32",
+      render: (r) =>
+        r.questions_answered != null ? toFa(r.questions_answered) : "—",
+    },
+    {
+      key: "created_at",
+      header: "تاریخ ثبت‌نام",
+      className: "w-32",
+      render: (r) => faDate(r.created_at),
+    },
+  ];
+
+  const a = detailData?.appro;
+  const s = detailData;
+  const userName = a
+    ? a.full_name || [a.first_name, a.last_name].filter(Boolean).join(" ") || ""
+    : detailUser
+      ? detailUser.full_name || [detailUser.first_name, detailUser.last_name].filter(Boolean).join(" ") || ""
+      : "";
+
+  return (
+    <div>
+      <PageHeader
+        title="کاربران نظرسنجی"
+        subtitle="فهرست کاربران و پاسخ‌های نظرسنجی آن‌ها"
+      />
+
+      <div className="mb-4 flex items-center gap-3">
+        <label className="text-sm text-muted">فیلتر:</label>
+        <Select value={answered} onChange={(e) => { setAnswered(e.target.value); setPage(1); }}>
+          <option value="">همه کاربران</option>
+          <option value="1">پاسخ داده‌اند</option>
+          <option value="0">پاسخ نداده‌اند</option>
+        </Select>
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={data}
+        loading={loading}
+        error={error}
+        onRetry={reload}
+        emptyTitle="کاربری یافت نشد"
+        emptyMessage="هنوز کاربری در نظرسنجی شرکت نکرده است."
+        actions={(row) => (
+          <Button variant="ghost" onClick={() => openDetail(row)} aria-label="جزئیات">
+            <EyeIcon className="h-4 w-4" />
+          </Button>
+        )}
+      />
+
+      {meta && (
+        <Pagination
+          page={page}
+          lastPage={meta.last_page}
+          total={meta.total}
+          onChange={setPage}
+        />
+      )}
+
+      <Modal
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
+        title={userName ? `جزئیات کاربر — ${userName}` : "جزئیات کاربر"}
+        footer={
+          <Button variant="secondary" onClick={() => setDetailOpen(false)}>
+            بستن
+          </Button>
+        }
+      >
+        {detailLoading && (
+          <div className="flex justify-center py-8">
+            <Spinner className="h-6 w-6" />
+          </div>
+        )}
+
+        {s && !detailLoading && (
+          <div className="flex flex-col gap-4">
+            <div className="grid grid-cols-2 gap-3">
+              <Card>
+                <p className="text-sm text-muted">نام</p>
+                <p className="mt-1 font-bold text-foreground">{userName || "—"}</p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">سن</p>
+                <p className="mt-1 font-bold text-foreground">
+                  {(a?.age ?? detailUser?.age) != null ? toFa(a?.age ?? detailUser!.age!) : "—"}
+                </p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">جنسیت</p>
+                <p className="mt-1 font-bold text-foreground">
+                  {(a?.gender ?? detailUser?.gender) != null
+                    ? GENDER_LABELS[a?.gender ?? detailUser!.gender!] ?? "—"
+                    : "—"}
+                </p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">تاریخ تولد</p>
+                <p className="mt-1 font-bold text-foreground">
+                  {a?.birthday ? faDate(a.birthday) : "—"}
+                </p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">ایمیل</p>
+                <p className="mt-1 font-bold text-foreground" dir="ltr">
+                  {(a?.email ?? detailUser?.email) || "—"}
+                </p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">موبایل</p>
+                <p className="mt-1 font-bold text-foreground" dir="ltr">
+                  {detailUser?.mobile || "—"}
+                </p>
+              </Card>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <Card>
+                <p className="text-sm text-muted">تعداد پاسخ‌ها</p>
+                <p className="mt-1 font-bold text-foreground">
+                  {s.answers_count != null ? toFa(s.answers_count) : "—"}
+                </p>
+              </Card>
+              <Card>
+                <p className="text-sm text-muted">سوالات پاسخ داده شده</p>
+                <p className="mt-1 font-bold text-foreground">
+                  {s.questions_answered != null ? toFa(s.questions_answered) : "—"}
+                </p>
+              </Card>
+            </div>
+
+            {s.survey_answers.length > 0 ? (
+              <div>
+                <h3 className="mb-3 text-sm font-bold text-foreground">
+                  پاسخ‌های نظرسنجی
+                </h3>
+                <div className="flex flex-col gap-2">
+                  {s.survey_answers.map((item) => (
+                    <div
+                      key={item.question_id}
+                      className="rounded-xl border border-border p-3"
+                    >
+                      <p className="text-sm font-medium text-foreground">
+                        {item.question}
+                      </p>
+                      <div className="mt-1 flex flex-wrap gap-1">
+                        {item.answers.map((a) => (
+                          <Badge key={a.option_id} tone="primary">
+                            {a.label}
+                          </Badge>
+                        ))}
+                        {item.answers.length === 0 && (
+                          <span className="text-xs text-muted">بدون پاسخ</span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <p className="text-center text-sm text-muted">
+                این کاربر هنوز به هیچ سوالی پاسخ نداده است.
+              </p>
+            )}
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+}

app/layout.tsx

@@ -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,

components/ThemeToggle.tsx

@@ -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 ? "حالت روشن" : "حالت تاریک"}
+      aria-label={LABELS[theme]}
-      title={dark ? "حالت روشن" : "حالت تاریک"}
+      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>
   );
 }

components/icons.tsx

@@ -196,3 +196,17 @@ export const TagIcon = (p: IconProps) => (
     <circle cx="7.5" cy="7.5" r="1.2" />
   </svg>
 );
+
+export const UserIcon = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="8" r="4" />
+    <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>
+);

lib/api.ts

@@ -1,7 +1,11 @@
 // Thin fetch wrapper for the meditation API. The app is a static SPA, so every
 // call runs in the browser and carries the bearer token from localStorage.
 
-import { MEDITATION_BASE_URL, TOKEN_STORAGE_KEY } from "./config";
+import {
+  APPRO_TOKEN_STORAGE_KEY,
+  MEDITATION_BASE_URL,
+  TOKEN_STORAGE_KEY,
+} from "./config";
 
 export class ApiError extends Error {
   status: number;
@@ -29,6 +33,21 @@ export function clearToken() {
   window.localStorage.removeItem(TOKEN_STORAGE_KEY);
 }
 
+export function getApproToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return window.localStorage.getItem(APPRO_TOKEN_STORAGE_KEY);
+}
+
+export function setApproToken(token: string) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(APPRO_TOKEN_STORAGE_KEY, token);
+}
+
+export function clearApproToken() {
+  if (typeof window === "undefined") return;
+  window.localStorage.removeItem(APPRO_TOKEN_STORAGE_KEY);
+}
+
 type Query = Record<string, string | number | boolean | undefined | null>;
 
 interface RequestOptions {
@@ -40,6 +59,8 @@ interface RequestOptions {
   baseUrl?: string;
   // Skip attaching the bearer token (used by the login calls).
   auth?: boolean;
+  // Extra headers to merge into the request.
+  headers?: Record<string, string>;
 }
 
 function buildUrl(path: string, query?: Query, baseUrl = MEDITATION_BASE_URL) {
@@ -60,7 +81,7 @@ export async function apiFetch<T = unknown>(
   path: string,
   options: RequestOptions = {},
 ): Promise<T> {
-  const { method = "GET", body, query, baseUrl, auth = true } = options;
+  const { method = "GET", body, query, baseUrl, auth = true, headers: extraHeaders } = options;
 
   const headers: Record<string, string> = { Accept: "application/json" };
 
@@ -69,6 +90,10 @@ export async function apiFetch<T = unknown>(
     if (token) headers.Authorization = `Bearer ${token}`;
   }
 
+  if (extraHeaders) {
+    Object.assign(headers, extraHeaders);
+  }
+
   let payload: BodyInit | undefined;
   if (body instanceof FormData) {
     payload = body; // browser sets multipart Content-Type + boundary

lib/auth.tsx

@@ -13,7 +13,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useState,
 } from "react";
 import { APPRO_BASE_URL, MEDITATION_BASE_URL, PACKAGE_NAME } from "./config";
@@ -21,8 +20,10 @@ import {
   ApiError,
   apiFetch,
   clearToken,
+  clearApproToken,
   getToken,
   setToken,
+  setApproToken,
   toFormData,
 } from "./api";
 
@@ -73,16 +74,12 @@ async function meditationLogin(approoToken: string): Promise<string> {
 }
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [token, setTokenState] = useState<string | null>(null);
+  const [token, setTokenState] = useState<string | null>(() => getToken());
-  const [ready, setReady] = useState(false);
+  const [ready] = useState(true);
-
-  useEffect(() => {
-    setTokenState(getToken());
-    setReady(true);
-  }, []);
 
   const login = useCallback(async (identifier: string, password: string) => {
     const approoToken = await approAgencyLogin(identifier, password);
+    setApproToken(approoToken);
     const medToken = await meditationLogin(approoToken);
     setToken(medToken);
     setTokenState(medToken);
@@ -90,6 +87,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
   const logout = useCallback(() => {
     clearToken();
+    clearApproToken();
     setTokenState(null);
   }, []);
 

lib/config.ts

@@ -19,5 +19,6 @@ export const ASSET_BASE_URL =
   process.env.NEXT_PUBLIC_ASSET_BASE_URL ??
   MEDITATION_BASE_URL.replace(/\/api\/?$/, "");
 
-// localStorage key for the meditation bearer token.
+// localStorage keys for the meditation bearer token and approagency token.
 export const TOKEN_STORAGE_KEY = "meditation_admin_token";
+export const APPRO_TOKEN_STORAGE_KEY = "approagency_admin_token";

lib/nav.ts

@@ -14,6 +14,7 @@ import {
   TagIcon,
   TimerIcon,
   TrophyIcon,
+  UserIcon,
   WorryIcon,
 } from "@/components/icons";
 
@@ -113,6 +114,11 @@ export const NAV: NavSection[] = [
     icon: SurveyIcon,
     items: [{ href: "/dashboard/surveys", label: "پرسش‌های نظرسنجی" }],
   },
+  {
+    label: "کاربران",
+    icon: UserIcon,
+    items: [{ href: "/dashboard/users", label: "کاربران نظرسنجی" }],
+  },
   {
     label: "گفتگو با مشاور",
     icon: ChatIcon,

lib/theme.tsx

@@ -1,59 +1,103 @@
 "use client";
 
-// Light/dark theme state. The actual `.dark` class is set on <html> by an inline
+// Light / dark / system theme state. The actual `.dark` class is set on <html>
-// script in the root layout (before paint, to avoid a flash) and kept in sync
+// by an inline script in the root layout (before paint) and kept in sync here.
-// here. Preference persists in localStorage.
+// 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) {
+function isSystemDark(): boolean {
-  document.documentElement.classList.toggle("dark", theme === "dark");
+  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");
+    const t = readStorage();
-    setThemeState(isDark ? "dark" : "light");
-  }, []);
-
-  const setTheme = useCallback((t: Theme) => {
     setThemeState(t);
-    applyClass(t);
+    apply(t);
-    try {
+
-      window.localStorage.setItem(THEME_STORAGE_KEY, t);
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    } catch {
+    mqRef.current = mq;
-      /* ignore (private mode) */
+
-    }
+    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(
+    const order: Theme[] = ["light", "dark", "system"];
-      document.documentElement.classList.contains("dark") ? "light" : "dark",
+    const next = order[(order.indexOf(theme) + 1) % order.length];
-    );
+    setTheme(next);
-  }, [setTheme]);
+  }, [theme, setTheme]);
 
   return (
-    <ThemeContext.Provider value={{ theme, toggle, setTheme }}>
+    <ThemeContext.Provider value={{ theme, resolved, toggle, setTheme }}>
       {children}
     </ThemeContext.Provider>
   );