e27d4cfa58
- 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>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useTheme } from 'next-themes'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Sun, Moon, Monitor, Check } from 'lucide-react'
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const icon =
|
|
theme === 'light' ? <Sun className="h-4 w-4" /> :
|
|
theme === 'dark' ? <Moon className="h-4 w-4" /> :
|
|
<Monitor className="h-4 w-4" />
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9">
|
|
{icon}
|
|
<span className="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => setTheme('light')} className="gap-2 cursor-pointer">
|
|
<Sun className="h-4 w-4" />
|
|
Light
|
|
{theme === 'light' && <Check className="h-3.5 w-3.5 ml-auto" />}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('dark')} className="gap-2 cursor-pointer">
|
|
<Moon className="h-4 w-4" />
|
|
Dark
|
|
{theme === 'dark' && <Check className="h-3.5 w-3.5 ml-auto" />}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setTheme('system')} className="gap-2 cursor-pointer">
|
|
<Monitor className="h-4 w-4" />
|
|
System
|
|
{theme === 'system' && <Check className="h-3.5 w-3.5 ml-auto" />}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|