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