From 4809edf73ad3593f622d1ecf12c937a95ba10921 Mon Sep 17 00:00:00 2001 From: jerick Date: Mon, 25 May 2026 18:10:22 +0000 Subject: [PATCH] Add dark mode toggle via next-themes Uses next-themes with system default. Toggle button in sidebar switches between light/dark and persists to localStorage. CSS variables for dark mode were already defined in globals.css. Co-Authored-By: Claude Sonnet 4.6 --- package.json | 1 + src/app/layout.tsx | 5 ++++- src/components/layout/Sidebar.tsx | 14 ++++++++++++-- src/components/layout/ThemeProvider.tsx | 11 +++++++++++ 4 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 src/components/layout/ThemeProvider.tsx diff --git a/package.json b/package.json index 8d4eebe..ab2764e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "lucide-react": "^1.8.0", "next": "16.2.4", "next-auth": "^5.0.0-beta.31", + "next-themes": "^0.4.6", "papaparse": "^5.5.3", "pg": "^8.20.0", "react": "19.2.4", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index daf6fb4..058722a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import { ThemeProvider } from "@/components/layout/ThemeProvider"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -27,7 +28,9 @@ export default function RootLayout({ lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} > - {children} + + {children} + ); } diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index cab4cd8..7250e6e 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -3,10 +3,11 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' import { signOut } from 'next-auth/react' +import { useTheme } from 'next-themes' import { cn } from '@/lib/utils' import { LayoutDashboard, CreditCard, ArrowLeftRight, - Upload, PiggyBank, TrendingUp, LogOut, + Upload, PiggyBank, TrendingUp, LogOut, Sun, Moon, } from 'lucide-react' import { Separator } from '@/components/ui/separator' @@ -21,6 +22,7 @@ const navItems = [ export function Sidebar() { const pathname = usePathname() + const { resolvedTheme, setTheme } = useTheme() return (