Add a comprehensive theme system allowing users to switch between three
distinct visual themes, each supporting both light and dark modes:
- Twitter (default): Clean blue design with soft shadows
- Claude: Warm beige/cream tones with orange primary accents
- Neo Brutalism: Bold colors, hard shadows, 0px border radius
New files:
- ui/src/hooks/useTheme.ts: Theme state management hook with localStorage
persistence for both theme selection and dark mode preference
- ui/src/components/ThemeSelector.tsx: Header dropdown with hover preview
and color swatches for quick theme switching
Modified files:
- ui/src/styles/globals.css: Added CSS custom properties for Claude and
Neo Brutalism themes with light/dark variants, shadow variables
integrated into @theme inline block
- ui/src/App.tsx: Integrated useTheme hook and ThemeSelector component
- ui/src/components/SettingsModal.tsx: Added theme selection UI with
preview swatches and dark mode toggle
- ui/index.html: Added DM Sans and Space Mono fonts for Neo Brutalism
Features:
- Independent theme and dark mode controls
- Smooth CSS transitions when switching themes
- Theme-specific shadow styles (soft vs hard)
- Theme-specific fonts and border radius
- Persisted preferences in localStorage
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>