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:
monoadmin
2026-04-10 16:44:05 -07:00
parent c361922005
commit e27d4cfa58
3 changed files with 63 additions and 2 deletions

View File

@@ -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