feat: add dark mode

components/ImagePicker.tsx

@@ -81,7 +81,7 @@ export function ImagePicker({
           انتخاب از کتابخانه
         </Button>
 
-        <label className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-border bg-surface-muted px-4 py-2 text-sm font-medium text-foreground transition hover:bg-[#e2e6f2]">
+        <label className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-border bg-surface-muted px-4 py-2 text-sm font-medium text-foreground transition hover:bg-surface-hover">
           بارگذاری تصویر
           <input
             type="file"

components/Providers.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import { AuthProvider } from "@/lib/auth";
+import { ThemeProvider } from "@/lib/theme";
 import { ToastProvider } from "./toast";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <ToastProvider>
-      <AuthProvider>{children}</AuthProvider>
-    </ToastProvider>
+    <ThemeProvider>
+      <ToastProvider>
+        <AuthProvider>{children}</AuthProvider>
+      </ToastProvider>
+    </ThemeProvider>
   );
 }

components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useTheme } from "@/lib/theme";
+import { SunIcon, MoonIcon } from "./icons";
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const { theme, toggle } = useTheme();
+  const dark = theme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={dark ? "حالت روشن" : "حالت تاریک"}
+      title={dark ? "حالت روشن" : "حالت تاریک"}
+      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" />}
+    </button>
+  );
+}

components/icons.tsx

@@ -70,6 +70,19 @@ export const SearchIcon = (p: IconProps) => (
   </svg>
 );
 
+export const SunIcon = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+  </svg>
+);
+
+export const MoonIcon = (p: IconProps) => (
+  <svg {...base(p)}>
+    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+  </svg>
+);
+
 export const LogoutIcon = (p: IconProps) => (
   <svg {...base(p)}>
     <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />

components/toast.tsx

@@ -53,7 +53,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
               "min-w-64 rounded-xl px-4 py-3 text-sm text-white shadow-lg",
               t.kind === "success" && "bg-success",
               t.kind === "error" && "bg-danger",
-              t.kind === "info" && "bg-foreground",
+              t.kind === "info" && "bg-primary",
             )}
           >
             {t.message}

components/ui.tsx

@@ -22,7 +22,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const buttonVariants: Record<ButtonVariant, string> = {
   primary: "bg-primary text-white hover:bg-primary-hover",
   secondary:
-    "bg-surface-muted text-foreground hover:bg-[#e2e6f2] border border-border",
+    "bg-surface-muted text-foreground hover:bg-surface-hover border border-border",
   danger: "bg-danger text-white hover:opacity-90",
   ghost: "text-muted hover:bg-surface-muted",
 };
@@ -115,7 +115,7 @@ export function Switch({
       <span
         className={cn(
           "relative h-6 w-11 rounded-full transition",
-          checked ? "bg-primary" : "bg-[#cdd3e6]",
+          checked ? "bg-primary" : "bg-[var(--switch-off)]",
         )}
       >
         <span
@@ -182,8 +182,8 @@ export function Badge({
       className={cn(
         "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
         tone === "neutral" && "bg-surface-muted text-muted",
-        tone === "success" && "bg-[#e3f6ee] text-success",
-        tone === "danger" && "bg-[#fbe7ea] text-danger",
+        tone === "success" && "bg-success/15 text-success",
+        tone === "danger" && "bg-danger/15 text-danger",
         tone === "primary" && "bg-primary-soft text-primary",
       )}
     >