feat: add dark mode

2026-06-03 09:01:42 +03:30
parent 7b8b8949b9
commit 4d67af0bfc
11 changed files with 155 additions and 11 deletions
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
 import { Sidebar } from "@/components/Sidebar";
 import { Spinner, Button } from "@/components/ui";
+import { ThemeToggle } from "@/components/ThemeToggle";
 import { LogoutIcon, MenuIcon, CloseIcon } from "@/components/icons";

 export default function DashboardLayout({
@@ -64,6 +65,7 @@ export default function DashboardLayout({
            {mobileOpen ? <CloseIcon /> : <MenuIcon />}
          </button>
          <div className="flex-1" />
+          <ThemeToggle />
          <Button variant="ghost" icon={<LogoutIcon className="h-4 w-4" />} onClick={onLogout}>
            خروج
          </Button>
@@ -1,10 +1,15 @@
@import "tailwindcss";

+/* Enable class-based dark mode (toggle a `.dark` class on <html>). */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Persian admin theme — calm meditation palette, RTL-first. */
 :root {
+  color-scheme: light;
  --background: #f4f6fb;
  --surface: #ffffff;
  --surface-muted: #eef1f8;
+  --surface-hover: #e2e6f2;
  --foreground: #1f2433;
  --muted: #6b7390;
  --border: #e1e5f0;
@@ -14,12 +19,34 @@
  --danger: #e25b6e;
  --success: #2fb583;
  --ring: rgba(91, 110, 225, 0.35);
+  --switch-off: #cdd3e6;
+  --scroll-thumb: #cdd3e6;
+}
+
+.dark {
+  color-scheme: dark;
+  --background: #0f1320;
+  --surface: #181d2e;
+  --surface-muted: #222840;
+  --surface-hover: #2c3450;
+  --foreground: #e7eaf3;
+  --muted: #97a0bd;
+  --border: #2c3450;
+  --primary: #6f7ff0;
+  --primary-hover: #5f6fe6;
+  --primary-soft: #232a47;
+  --danger: #f06b7d;
+  --success: #3ec79a;
+  --ring: rgba(111, 127, 240, 0.4);
+  --switch-off: #3a4566;
+  --scroll-thumb: #39425f;
 }

@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
+  --color-surface-hover: var(--surface-hover);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-border: var(--border);
@@ -45,6 +72,7 @@ body {
  color: var(--foreground);
  font-family: var(--font-vazir), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }

 /* Persian digits feel native when the font handles them; keep tabular for tables. */
@@ -58,7 +86,7 @@ table {
  height: 10px;
 }
 ::-webkit-scrollbar-thumb {
-  background: #cdd3e6;
+  background: var(--scroll-thumb);
  border-radius: 999px;
 }
 ::-webkit-scrollbar-track {
@@ -14,6 +14,10 @@ export const metadata: Metadata = {
  description: "پنل مدیریت محتوای اپلیکیشن آرام جان",
 };

+// 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){}})();`;
+
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -21,6 +25,9 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="fa" dir="rtl" className={`${vazir.variable} h-full`}>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: noFlashTheme }} />
+      </head>
      <body className="min-h-full">
        <Providers>{children}</Providers>
      </body>
@@ -7,6 +7,7 @@ import { useToast } from "@/components/toast";
 import { ApiError } from "@/lib/api";
 import { Button, Field, Input } from "@/components/ui";
 import { Logo } from "@/components/Logo";
+import { ThemeToggle } from "@/components/ThemeToggle";

 export default function LoginPage() {
  const { login, token, ready } = useAuth();
@@ -39,7 +40,10 @@ export default function LoginPage() {
  }

  return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-bl from-[#eef1fb] to-[#f6f3fb] p-4">
+    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-bl from-[#eef1fb] to-[#f6f3fb] p-4 dark:from-[#11151f] dark:to-[#0d1018]">
+      <div className="absolute top-4 left-4">
+        <ThemeToggle />
+      </div>
      <div className="w-full max-w-md rounded-3xl border border-border bg-surface p-8 shadow-lg">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary-soft">