RequestNetwork · mayur1377 · Jul 31, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -2,6 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { DashboardNavigation } from "@/components/dashboard-navigation";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
+import { Button } from "@/components/ui/button";
 import { getCurrentSession } from "@/server/auth";
 import { PlusCircle } from "lucide-react";
 import Link from "next/link";
@@ -24,13 +25,12 @@ export default async function DashboardLayout({
       <main className="flex-grow flex flex-col w-full max-w-sm sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-[72rem] mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
         <div className="flex justify-between items-center mb-8">
           <h1 className="mb-2 text-4xl font-bold tracking-tight">Dashboard</h1>
-          <Link
-            href="/invoices/create"
-            className="bg-black hover:bg-zinc-800 text-white transition-colors px-4 py-2 rounded-md flex items-center"
-          >
-            <PlusCircle className="mr-2 h-4 w-4" />
-            Create Invoice
-          </Link>
+          <Button asChild variant="default" className="flex items-center gap-2">
+            <Link href="/invoices/create">
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Create Invoice
+            </Link>
+          </Button>
         </div>
         <DashboardNavigation />
         {children}

diff --git a/src/app/i/[id]/page.tsx b/src/app/i/[id]/page.tsx
@@ -39,7 +39,7 @@ export default async function InvoiceMePage({
         <div className="flex items-center mb-8">
           <Link
             href="/"
-            className="text-zinc-600 hover:text-black transition-colors mr-4"
+            className="text-muted-foreground hover:text-foreground transition-colors mr-4"
           >
             <ArrowLeft className="h-6 w-6" />
           </Link>

diff --git a/src/app/invoices/create/page.tsx b/src/app/invoices/create/page.tsx
@@ -27,7 +27,7 @@ export default async function CreateInvoicePage() {
         <div className="flex items-center mb-8">
           <Link
             href="/dashboard"
-            className="text-zinc-600 hover:text-black transition-colors mr-4"
+            className="text-muted-foreground hover:text-foreground transition-colors mr-4"
           >
             <ArrowLeft className="h-6 w-6" />
           </Link>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { cookies } from "next/headers";
 import "./globals.css";
+import { ThemeProvider } from "next-themes";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -32,20 +33,22 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID as string} />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <AppKit>
-          <TooltipProvider>
-            <TRPCReactProvider cookies={cookies().toString()}>
-              <BackgroundWrapper>{children}</BackgroundWrapper>
-            </TRPCReactProvider>
-            <Toaster />
-          </TooltipProvider>
-        </AppKit>
-        <VersionDisplay githubRelease="https://github.com/RequestNetwork/easy-invoice/releases" />
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <AppKit>
+            <TooltipProvider>
+              <TRPCReactProvider cookies={cookies().toString()}>
+                <BackgroundWrapper>{children}</BackgroundWrapper>
+              </TRPCReactProvider>
+              <Toaster />
+            </TooltipProvider>
+          </AppKit>
+          <VersionDisplay githubRelease="https://github.com/RequestNetwork/easy-invoice/releases" />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/src/components/background-wrapper.tsx b/src/components/background-wrapper.tsx
@@ -1,3 +1,5 @@
+"use client";
+import { useTheme } from "next-themes";
 import type { ReactNode } from "react";
 
 interface BackgroundWrapperProps {
@@ -23,6 +25,8 @@ export function BackgroundWrapper({
     to: "zinc-200",
   },
 }: BackgroundWrapperProps) {
+  const { theme } = useTheme();
+
   // Convert Tailwind color names to CSS variables or hex values
   const getTailwindColor = (colorName: string): string => {
     const colors: Record<string, string> = {
@@ -42,38 +46,53 @@ export function BackgroundWrapper({
       "zinc-100": "#f4f4f5",
       "zinc-200": "#e4e4e7",
 
+      // Dark mode colors
+      "zinc-800": "#27272a",
+      "zinc-900": "#18181b",
+      "slate-800": "#1e293b",
+      "slate-900": "#0f172a",
+
       // Add any other colors you need here
     };
 
     return colors[colorName] || "#f4f4f5"; // Default to zinc-100 if color not found
   };
 
+  const isDark = theme === "dark";
+
   return (
-    <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
-      {/* Decorative elements */}
-      <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
-        <div
-          className="w-full h-full rounded-full opacity-30 blur-3xl"
-          style={{
-            background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
-          }}
-        />
-      </div>
-      <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
-        <div
-          className="w-full h-full rounded-full opacity-30 blur-3xl"
-          style={{
-            background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
-          }}
-        />
-      </div>
+    <div
+      className={`min-h-screen relative overflow-hidden ${isDark ? "bg-[#0A0A0A]" : "bg-[#FAFAFA]"}`}
+    >
+      {/* Decorative elements - only show in light mode */}
+      {!isDark && (
+        <>
+          <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
+            <div
+              className="w-full h-full rounded-full opacity-30 blur-3xl"
+              style={{
+                background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
+              }}
+            />
+          </div>
+          <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
+            <div
+              className="w-full h-full rounded-full opacity-30 blur-3xl"
+              style={{
+                background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
+              }}
+            />
+          </div>
+        </>
+      )}
 
       {/* Dot pattern background */}
       <div
         className="absolute inset-0"
         style={{
-          backgroundImage:
-            "radial-gradient(circle at 1px 1px, #e5e5e5 1px, transparent 0)",
+          backgroundImage: isDark
+            ? "radial-gradient(circle at 1px 1px, #1f1f1f 1px, transparent 0)"
+            : "radial-gradient(circle at 1px 1px, #e5e5e5 1px, transparent 0)",
           backgroundSize: "40px 40px",
         }}
       />