Feat/implement dark mode system for merchant dashbaord

apps/dashboard/src/app/(auth)/layout.tsx

@@ -4,5 +4,11 @@
  * passes through.
  */
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return children;
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-background">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,var(--status-success-bg),transparent_36%),radial-gradient(circle_at_bottom_right,var(--status-info-bg),transparent_30%)]" />
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
+      <div className="relative">{children}</div>
+    </div>
+  );
 }

apps/dashboard/src/app/globals.css

@@ -9,8 +9,200 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@theme inline {
+  /* ── Colors ── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  /* ── Chart palette ── */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* ── Brand palette ── */
+  --color-ink: var(--ink);
+  --color-ink2: var(--ink2);
+  --color-ink3: var(--ink3);
+  --color-blue: var(--blue);
+  --color-blue2: var(--blue2);
+  --color-teal: var(--teal);
+  --color-amber: var(--amber);
+  --color-red: var(--red);
+  --color-green: var(--green);
+  --color-purple: var(--purple);
+
+  /* ── Font families ── */
+  --font-display: var(--font-hanken), "Trebuchet MS", sans-serif;
+  --font-body: var(--font-hanken), sans-serif;
+  --font-mono: var(--font-jet-mono), "JetBrains Mono", Menlo, monospace;
+
+  /* ── Radius ── */
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+
+  /* ── Sidebar ── */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+
+  /* ── Dark mode page tokens ── */
+  --color-bg-page: var(--bg-page);
+  --color-bg-card: var(--bg-card);
+  --color-bg-sidebar: var(--bg-sidebar);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-border-color: var(--border-color);
+  --color-input-bg: var(--input-bg);
+  --color-input-border: var(--input-border);
+  --color-code-bg: var(--code-bg);
+
+  /* ── Chart theming tokens ── */
+  --color-chart-tick: var(--chart-tick);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-tooltip-bg: var(--chart-tooltip-bg);
+  --color-chart-tooltip-text: var(--chart-tooltip-text);
+
+  /* ── Status tokens ── */
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-success-text: var(--status-success-text);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-warning-text: var(--status-warning-text);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-error-text: var(--status-error-text);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-info-text: var(--status-info-text);
+  --color-status-purple-bg: var(--status-purple-bg);
+  --color-status-purple-text: var(--status-purple-text);
+  --color-status-amber-bg: var(--status-amber-bg);
+  --color-status-amber-text: var(--status-amber-text);
+}
+
 :root {
   --header-height: 3.5rem;
+
+  /* ── Dark mode specific tokens (dark-first) ── */
+  --bg-page: #0B1628;
+  --bg-card: #1A2332;
+  --bg-sidebar: #0F1D2E;
+  --text-primary: #F8F9FA;
+  --text-secondary: #6C757D;
+  --border-color: #2D3748;
+  --input-bg: #1A2332;
+  --input-border: #2D3748;
+  --code-bg: #0B1628;
+
+  /* ── Chart theming tokens ── */
+  --chart-tick: #F8F9FA;
+  --chart-grid: rgba(248, 249, 250, 0.08);
+  --chart-tooltip-bg: #1A2332;
+  --chart-tooltip-text: #F8F9FA;
+  --chart-tooltip-border: #2D3748;
+
+  /* ── Semantic status tokens ── */
+  --status-success-bg: rgba(34, 197, 94, 0.12);
+  --status-success-text: #4ade80;
+  --status-warning-bg: rgba(245, 158, 11, 0.12);
+  --status-warning-text: #fbbf24;
+  --status-error-bg: rgba(239, 68, 68, 0.12);
+  --status-error-text: #f87171;
+  --status-info-bg: rgba(59, 130, 246, 0.12);
+  --status-info-text: #60a5fa;
+  --status-purple-bg: rgba(168, 85, 247, 0.12);
+  --status-purple-text: #c084fc;
+  --status-amber-bg: rgba(245, 158, 11, 0.12);
+  --status-amber-text: #fbbf24;
+
+  /* Sidebar uses Useroutr ink tiers for dark-first design */
+  --sidebar: var(--ink2);
+  --sidebar-foreground: var(--lead);
+  --sidebar-primary: var(--blue);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--ink3);
+  --sidebar-accent-foreground: var(--lead);
+  --sidebar-border: var(--rule);
+  --sidebar-ring: var(--blue2);
+}
+
+.light {
+  --bg-page: #FFFFFF;
+  --bg-card: #F8F9FA;
+  --bg-sidebar: #F3F4F6;
+  --text-primary: #1A202C;
+  --text-secondary: #6B7280;
+  --border-color: #E2E8F0;
+  --input-bg: #FFFFFF;
+  --input-border: #D1D5DB;
+  --code-bg: #F1F5F9;
+
+  --chart-tick: #1A202C;
+  --chart-grid: rgba(0, 0, 0, 0.08);
+  --chart-tooltip-bg: #FFFFFF;
+  --chart-tooltip-text: #1A202C;
+  --chart-tooltip-border: #E2E8F0;
+
+  --status-success-bg: rgba(34, 197, 94, 0.1);
+  --status-success-text: #16a34a;
+  --status-warning-bg: rgba(245, 158, 11, 0.1);
+  --status-warning-text: #d97706;
+  --status-error-bg: rgba(239, 68, 68, 0.1);
+  --status-error-text: #dc2626;
+  --status-info-bg: rgba(59, 130, 246, 0.1);
+  --status-info-text: #2563eb;
+  --status-purple-bg: rgba(168, 85, 247, 0.1);
+  --status-purple-text: #7c3aed;
+  --status-amber-bg: rgba(245, 158, 11, 0.1);
+  --status-amber-text: #d97706;
+
+  --sidebar: oklch(0.975 0.003 265);
+  --sidebar-foreground: oklch(0.15 0.01 265);
+  --sidebar-primary: var(--blue);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.945 0.006 265);
+  --sidebar-accent-foreground: oklch(0.15 0.01 265);
+  --sidebar-border: oklch(0.88 0.008 265);
+  --sidebar-ring: var(--blue2);
+}
+
+.dark {
+  --sidebar: var(--bg-sidebar);
+  --sidebar-foreground: var(--text-primary);
+  --sidebar-primary: var(--blue);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #1E293B;
+  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-border: var(--border-color);
+  --sidebar-ring: var(--blue2);
 }
 
 @layer base {

apps/dashboard/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { QueryProvider } from "@/providers/QueryProvider";
 import { AuthProvider } from "@/providers/AuthProvider";
 import "./globals.css";
 import { ToastProvider } from "@useroutr/ui";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 // Hanken Grotesk — display + body. Same family as the marketing site so the
 // brand voice is unbroken between useroutr.com and dashboard.useroutr.com.
@@ -49,14 +50,23 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var p=localStorage.getItem("useroutr-theme");var t=p==="dark"?"dark":p==="light"?"light":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.classList.add(t)}catch(e){}})()`,
+          }}
+        />
+      </head>
       <body
         className={`${hanken.variable} ${fraunces.variable} ${jetMono.variable} antialiased`}
       >
         <ThemeProvider>
           <QueryProvider>
             <Suspense>
               <AuthProvider>
-                <ToastProvider>{children}</ToastProvider>
+                <TooltipProvider>
+                  <ToastProvider>{children}</ToastProvider>
+                </TooltipProvider>
               </AuthProvider>
             </Suspense>
           </QueryProvider>

apps/dashboard/src/components/analytics/AnalyticsDashboard.tsx

@@ -111,9 +111,9 @@ const PERIOD_OPTIONS: Array<{ value: Period; label: string }> = [
 ];
 
 const PAYMENT_COLORS: Record<PaymentMethod, string> = {
-  card: "#3b82f6",
-  crypto: "#14b8a6",
-  bank: "#f59e0b",
+  card: "var(--blue)",
+  crypto: "var(--teal)",
+  bank: "var(--amber)",
 };
 
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -782,7 +782,7 @@ function RevenueChart({
                 x2={width}
                 y1={y}
                 y2={y}
-                stroke="rgba(148,163,184,0.22)"
+                stroke="var(--chart-grid)"
                 strokeDasharray="4 6"
               />
             );
@@ -806,15 +806,15 @@ function RevenueChart({
                   width={barWidth}
                   height={barHeight}
                   rx={8}
-                  fill={active ? "#1d4ed8" : "#3b82f6"}
+                  fill={active ? "var(--blue)" : "var(--blue2)"}
                   opacity={active ? 1 : 0.82}
                 />
                 <text
                   x={x + barWidth / 2}
                   y={height - 18}
                   textAnchor="middle"
                   fontSize="11"
-                  fill="rgba(100,116,139,1)"
+                  fill="var(--chart-tick)"
                 >
                   {point.label}
                 </text>
@@ -826,13 +826,13 @@ function RevenueChart({
                       width={106}
                       height={30}
                       rx={10}
-                      fill="rgba(15,23,42,0.95)"
+                      fill="var(--chart-tooltip-bg)"
                     />
                     <text
                       x={Math.max(18, x - 18)}
                       y={Math.max(28, y - 18)}
                       fontSize="11"
-                      fill="#ffffff"
+                      fill="var(--chart-tooltip-text)"
                     >
                       {formatCompactMoney(point.amount)}
                     </text>
@@ -880,7 +880,7 @@ function PaymentMethodCard({
               cy="70"
               r={radius}
               fill="none"
-              stroke="rgba(148,163,184,0.18)"
+              stroke="var(--chart-grid)"
               strokeWidth="20"
             />
             {segments.map((segment) => {
@@ -983,8 +983,8 @@ function ConversionCard({
         >
           <defs>
             <linearGradient id="conversion-fill-dashboard" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="rgba(20,184,166,0.35)" />
-              <stop offset="100%" stopColor="rgba(20,184,166,0.02)" />
+              <stop offset="0%" stopColor="var(--teal)" stopOpacity={0.35} />
+              <stop offset="100%" stopColor="var(--teal)" stopOpacity={0.02} />
             </linearGradient>
           </defs>
           <path
@@ -994,7 +994,7 @@ function ConversionCard({
           <path
             d={path}
             fill="none"
-            stroke="#14b8a6"
+            stroke="var(--teal)"
             strokeWidth="3"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -1058,7 +1058,7 @@ function FailureHeatmap({
   const maxCount = Math.max(...byHour.map((cell) => cell.count), 1);
   const getColor = (count: number) => {
     const alpha = count / maxCount;
-    return `rgba(239,68,68,${0.1 + alpha * 0.75})`;
+    return `color-mix(in srgb, var(--red) ${Math.round((0.1 + alpha * 0.75) * 100)}%, transparent)`;
   };
 
   return (