Add light/dark/system theme switcher
- Wrap root layout with ThemeProvider (next-themes, defaultTheme=system) - Remove hardcoded dark class from <html> - 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 <noreply@anthropic.com>
This commit is contained in:
@@ -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) {
|
||||
<h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<ThemeToggle />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="flex items-center gap-2">
|
||||
@@ -112,6 +116,7 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<MobileNav
|
||||
|
||||
Reference in New Issue
Block a user