57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
# 66. Add Theme Selector in Settings
|
|
|
|
meta:
|
|
id: podcast-tui-app-66
|
|
feature: podcast-tui-app
|
|
priority: P1
|
|
depends_on: [59, 60, 61, 62, 63, 64, 65]
|
|
tags: [theming, settings, selector, solidjs]
|
|
|
|
objective:
|
|
- Add theme selection UI in settings screen
|
|
- Display all available themes (default, Catppuccin, Gruvbox, Tokyo, Nord, custom)
|
|
- Allow users to select and switch themes
|
|
- Show currently selected theme
|
|
- Persist theme preference
|
|
|
|
deliverables:
|
|
- `/src/components/ThemeSelector.tsx` - Theme selector component
|
|
- Updated `/src/components/SettingsScreen.tsx` to include theme selector
|
|
- Updated `/src/store/theme.ts` to handle theme preference persistence
|
|
- Theme selector in settings navigation
|
|
|
|
steps:
|
|
- Create ThemeSelector component with theme list
|
|
- Implement theme selection logic
|
|
- Display current theme with visual indicator
|
|
- Add theme descriptions or icons
|
|
- Integrate theme selector into Settings screen
|
|
- Save theme preference to storage
|
|
- Handle theme switching with instant updates
|
|
- Add keyboard navigation for theme list
|
|
|
|
tests:
|
|
- Unit: Test theme selector displays all themes
|
|
- Unit: Test theme selection updates current theme
|
|
- Unit: Test theme preference saves to storage
|
|
- Integration: Test theme switching works across all components
|
|
|
|
acceptance_criteria:
|
|
- Theme selector shows all available themes
|
|
- Users can select and switch themes
|
|
- Current theme is clearly indicated
|
|
- Theme preference persists across sessions
|
|
- Theme changes apply immediately to all components
|
|
|
|
validation:
|
|
- Run `bun run build` to verify TypeScript compilation
|
|
- Test theme selector manually in settings
|
|
- Verify theme preference saves/loads correctly
|
|
- Check theme applies to all UI components
|
|
|
|
notes:
|
|
- Use existing theme manager for theme switching
|
|
- Consider adding theme search/filter
|
|
- Show theme preview in selector if possible
|
|
- Ensure accessibility for keyboard navigation
|