Amirmahdi/meditation-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode

Browse Source
This commit is contained in:
Amirmahdi
2026-06-03 09:01:42 +03:30
parent 7b8b8949b9
commit 4d67af0bfc
11 changed files with 155 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/dashboard/layout.tsx
+2
View File
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth"; import { useAuth } from "@/lib/auth";
import { Sidebar } from "@/components/Sidebar"; import { Sidebar } from "@/components/Sidebar";
import { Spinner, Button } from "@/components/ui"; import { Spinner, Button } from "@/components/ui";
import { ThemeToggle } from "@/components/ThemeToggle";
import { LogoutIcon, MenuIcon, CloseIcon } from "@/components/icons"; import { LogoutIcon, MenuIcon, CloseIcon } from "@/components/icons";
export default function DashboardLayout({ export default function DashboardLayout({
@@ -64,6 +65,7 @@ export default function DashboardLayout({
{mobileOpen ? <CloseIcon /> : <MenuIcon />} {mobileOpen ? <CloseIcon /> : <MenuIcon />}
</button> </button>
<div className="flex-1" /> <div className="flex-1" />
<ThemeToggle />
<Button variant="ghost" icon={<LogoutIcon className="h-4 w-4" />} onClick={onLogout}> <Button variant="ghost" icon={<LogoutIcon className="h-4 w-4" />} onClick={onLogout}>
خروج خروج
</Button> </Button>
app/globals.css
+29 -1
View File
@@ -1,10 +1,15 @@
@import "tailwindcss"; @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. */ /* Persian admin theme — calm meditation palette, RTL-first. */
:root { :root {
color-scheme: light;
--background: #f4f6fb; --background: #f4f6fb;
--surface: #ffffff; --surface: #ffffff;
--surface-muted: #eef1f8; --surface-muted: #eef1f8;
--surface-hover: #e2e6f2;
--foreground: #1f2433; --foreground: #1f2433;
--muted: #6b7390; --muted: #6b7390;
--border: #e1e5f0; --border: #e1e5f0;
@@ -14,12 +19,34 @@
--danger: #e25b6e; --danger: #e25b6e;
--success: #2fb583; --success: #2fb583;
--ring: rgba(91, 110, 225, 0.35); --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 { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-surface: var(--surface); --color-surface: var(--surface);
--color-surface-muted: var(--surface-muted); --color-surface-muted: var(--surface-muted);
--color-surface-hover: var(--surface-hover);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-muted: var(--muted); --color-muted: var(--muted);
--color-border: var(--border); --color-border: var(--border);
@@ -45,6 +72,7 @@ body {
color: var(--foreground); color: var(--foreground);
font-family: var(--font-vazir), system-ui, sans-serif; font-family: var(--font-vazir), system-ui, sans-serif;
-webkit-font-smoothing: antialiased; -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. */ /* Persian digits feel native when the font handles them; keep tabular for tables. */
@@ -58,7 +86,7 @@ table {
height: 10px; height: 10px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #cdd3e6; background: var(--scroll-thumb);
border-radius: 999px; border-radius: 999px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
app/layout.tsx
+7
View File
@@ -14,6 +14,10 @@ export const metadata: Metadata = {
description: "پنل مدیریت محتوای اپلیکیشن آرام جان", 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({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -21,6 +25,9 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="fa" dir="rtl" className={`${vazir.variable} h-full`}> <html lang="fa" dir="rtl" className={`${vazir.variable} h-full`}>
<head>
<script dangerouslySetInnerHTML={{ __html: noFlashTheme }} />
</head>
<body className="min-h-full"> <body className="min-h-full">
<Providers>{children}</Providers> <Providers>{children}</Providers>
</body> </body>
app/login/page.tsx
+5 -1
View File
@@ -7,6 +7,7 @@ import { useToast } from "@/components/toast";
import { ApiError } from "@/lib/api"; import { ApiError } from "@/lib/api";
import { Button, Field, Input } from "@/components/ui"; import { Button, Field, Input } from "@/components/ui";
import { Logo } from "@/components/Logo"; import { Logo } from "@/components/Logo";
import { ThemeToggle } from "@/components/ThemeToggle";
export default function LoginPage() { export default function LoginPage() {
const { login, token, ready } = useAuth(); const { login, token, ready } = useAuth();
@@ -39,7 +40,10 @@ export default function LoginPage() {
} }
return ( 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="w-full max-w-md rounded-3xl border border-border bg-surface p-8 shadow-lg">
<div className="mb-8 text-center"> <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"> <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary-soft">
components/ImagePicker.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ export function ImagePicker({
انتخاب از کتابخانه انتخاب از کتابخانه
</Button> </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 <input
type="file" type="file"
components/Providers.tsx
+3
View File
@@ -1,12 +1,15 @@
"use client"; "use client";
import { AuthProvider } from "@/lib/auth"; import { AuthProvider } from "@/lib/auth";
import { ThemeProvider } from "@/lib/theme";
import { ToastProvider } from "./toast"; import { ToastProvider } from "./toast";
export function Providers({ children }: { children: React.ReactNode }) { export function Providers({ children }: { children: React.ReactNode }) {
return ( return (
<ThemeProvider>
<ToastProvider> <ToastProvider>
<AuthProvider>{children}</AuthProvider> <AuthProvider>{children}</AuthProvider>
</ToastProvider> </ToastProvider>
</ThemeProvider>
); );
} }
components/ThemeToggle.tsx
+21
View File
@@ -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
+13
View File
@@ -70,6 +70,19 @@ export const SearchIcon = (p: IconProps) => (
</svg> </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) => ( export const LogoutIcon = (p: IconProps) => (
<svg {...base(p)}> <svg {...base(p)}>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
components/toast.tsx
+1 -1
View File
@@ -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", "min-w-64 rounded-xl px-4 py-3 text-sm text-white shadow-lg",
t.kind === "success" && "bg-success", t.kind === "success" && "bg-success",
t.kind === "error" && "bg-danger", t.kind === "error" && "bg-danger",
t.kind === "info" && "bg-foreground", t.kind === "info" && "bg-primary",
)} )}
> >
{t.message} {t.message}
components/ui.tsx
+4 -4
View File
@@ -22,7 +22,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
const buttonVariants: Record<ButtonVariant, string> = { const buttonVariants: Record<ButtonVariant, string> = {
primary: "bg-primary text-white hover:bg-primary-hover", primary: "bg-primary text-white hover:bg-primary-hover",
secondary: 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", danger: "bg-danger text-white hover:opacity-90",
ghost: "text-muted hover:bg-surface-muted", ghost: "text-muted hover:bg-surface-muted",
}; };
@@ -115,7 +115,7 @@ export function Switch({
<span <span
className={cn( className={cn(
"relative h-6 w-11 rounded-full transition", "relative h-6 w-11 rounded-full transition",
checked ? "bg-primary" : "bg-[#cdd3e6]", checked ? "bg-primary" : "bg-[var(--switch-off)]",
)} )}
> >
<span <span
@@ -182,8 +182,8 @@ export function Badge({
className={cn( className={cn(
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
tone === "neutral" && "bg-surface-muted text-muted", tone === "neutral" && "bg-surface-muted text-muted",
tone === "success" && "bg-[#e3f6ee] text-success", tone === "success" && "bg-success/15 text-success",
tone === "danger" && "bg-[#fbe7ea] text-danger", tone === "danger" && "bg-danger/15 text-danger",
tone === "primary" && "bg-primary-soft text-primary", tone === "primary" && "bg-primary-soft text-primary",
)} )}
> >
lib/theme.tsx
+66
View File
@@ -0,0 +1,66 @@
"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.
import {
createContext,
useCallback,
useContext,
useEffect,
useState,
} from "react";
export const THEME_STORAGE_KEY = "aram_theme";
type Theme = "light" | "dark";
interface ThemeApi {
theme: Theme;
toggle: () => void;
setTheme: (t: Theme) => void;
}
const ThemeContext = createContext<ThemeApi | null>(null);
function applyClass(theme: Theme) {
document.documentElement.classList.toggle("dark", theme === "dark");
}
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setThemeState] = useState<Theme>("light");
// Read whatever the no-flash script already decided.
useEffect(() => {
const isDark = document.documentElement.classList.contains("dark");
setThemeState(isDark ? "dark" : "light");
}, []);
const setTheme = useCallback((t: Theme) => {
setThemeState(t);
applyClass(t);
try {
window.localStorage.setItem(THEME_STORAGE_KEY, t);
} catch {
/* ignore (private mode) */
}
}, []);
const toggle = useCallback(() => {
setTheme(
document.documentElement.classList.contains("dark") ? "light" : "dark",
);
}, [setTheme]);
return (
<ThemeContext.Provider value={{ theme, toggle, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme(): ThemeApi {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
return ctx;
}