From e27d4cfa580cabe7082891d5022a481d35ebb3c6 Mon Sep 17 00:00:00 2001 From: monoadmin Date: Fri, 10 Apr 2026 16:44:05 -0700 Subject: [PATCH] Add light/dark/system theme switcher - Wrap root layout with ThemeProvider (next-themes, defaultTheme=system) - Remove hardcoded dark class from - Add ThemeToggle component with Sun/Moon/Monitor icons and checkmark on active selection - Mount toggle in dashboard header next to user menu Co-Authored-By: Claude Sonnet 4.6 --- app/layout.tsx | 12 +++++++-- components/dashboard/header.tsx | 5 ++++ components/theme-toggle.tsx | 48 +++++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 components/theme-toggle.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 890767a..0a459d6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata, Viewport } from 'next' import { Inter, JetBrains_Mono } from 'next/font/google' import { SessionProvider } from 'next-auth/react' +import { ThemeProvider } from '@/components/theme-provider' import './globals.css' const inter = Inter({ subsets: ["latin"] }); @@ -41,9 +42,16 @@ export default function RootLayout({ children: React.ReactNode }>) { return ( - + - {children} + + {children} + ) diff --git a/components/dashboard/header.tsx b/components/dashboard/header.tsx index 859196e..7123d53 100644 --- a/components/dashboard/header.tsx +++ b/components/dashboard/header.tsx @@ -13,6 +13,7 @@ import { import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react' import Link from 'next/link' import { MobileNav } from './mobile-nav' +import { ThemeToggle } from '@/components/theme-toggle' import { useState } from 'react' interface Profile { @@ -78,6 +79,9 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {

{title}

+
+ +
: + theme === 'dark' ? : + + + return ( + + + + + + setTheme('light')} className="gap-2 cursor-pointer"> + + Light + {theme === 'light' && } + + setTheme('dark')} className="gap-2 cursor-pointer"> + + Dark + {theme === 'dark' && } + + setTheme('system')} className="gap-2 cursor-pointer"> + + System + {theme === 'system' && } + + + + ) +}