"use client"; import { Check, Moon, Palette, SunMoon, Sun } from "lucide-react"; import { useTheme } from "@/hooks/use-theme"; import { MODES, THEMES, type Mode, type ThemeId } from "@/lib/themes"; import { cn } from "@/lib/utils"; import { SettingsPanelHead } from "./settings-panel-head"; /** * Appearance panel — light/dark mode + accent-color picker. * * Two independent controls: a mode toggle (light / dark) and the * accent grid. Either applies + persists immediately. No save button: * each change is a single attribute swap on , there's nothing * to roll back. * * Persistence: localStorage only (device-scoped). The boot script in * layout.tsx replays both choices before first paint on subsequent * loads. */ export function AppearancePanel() { const { theme, setTheme, mode, setMode } = useTheme(); return (

Mode

{MODES.map((m) => ( setMode(m)} /> ))}

Accent color

{THEMES.map((t) => ( setTheme(t.id)} /> ))}
); } function ModeCard({ mode, isActive, onPick, }: { mode: Mode; isActive: boolean; onPick: () => void; }) { const isLight = mode === "light"; const Icon = isLight ? Sun : Moon; return ( ); } function ThemeCard({ id, name, tagline, swatch, isActive, onPick, }: { id: ThemeId; name: string; tagline: string; swatch: string; isActive: boolean; onPick: () => void; }) { return ( ); }