Theme & Appearance ## Business Purpose Allow users to customize the application's look and feel, including light/dark mode and theme settings. ## Current Behaviors - Theme Toggle: `Appearance` component provides a dropdown to switch between light, dark, and system themes Appearance.tsx:25.

Theme Provider: ThemeProvider component wraps the app and applies the selected theme class to the document theme-provider.tsx:31.
Storage: Theme preference is persisted in localStorage with key vite-ui-theme theme-provider.tsx:38.
CSS Variables: Theme colors are defined via CSS custom properties and toggled by dark class on <html>. ## Technical Implementation - Component: Appearance.tsx:25-92 uses React state and calls setTheme from ThemeProvider context.
Context: ThemeProvider at theme-provider.tsx:31-108 provides theme, setTheme, and applies class to document.
Persistence: Uses localStorage with storageKey="vite-ui-theme" theme-provider.tsx:38.
Integration: Theme state is used by all components via Tailwind CSS dark mode variant.
Testing: Visual regression tests could be added; currently no dedicated test. ## Definition of Done - Theme toggle changes the document class and updates component styles (manual verification).
Selected theme persists after page refresh (localStorage check).
System theme respects user's OS preference when set to "system".
All components render correctly in both light and dark modes (visual check).

Theme & Appearance ## Business Purpose Allow users to customize the application's look and feel, including light/dark mode and theme settings. ## Current Behaviors - Theme Toggle: Appearance component provides a dropdown to switch between light, dark, and system themes Appearance.tsx:25.