diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 41667ca..d57173f 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -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 ? : }
+ diff --git a/app/globals.css b/app/globals.css index 9c0c0c8..f151608 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,10 +1,15 @@ @import "tailwindcss"; +/* Enable class-based dark mode (toggle a `.dark` class on ). */ +@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 { diff --git a/app/layout.tsx b/app/layout.tsx index 40f2608..b8048dd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 ( + +