60 lines
1.9 KiB
Markdown
60 lines
1.9 KiB
Markdown
# 14. Integrate Theme Provider into App Component
|
|
|
|
meta:
|
|
id: podtui-navigation-theming-improvements-14
|
|
feature: podtui-navigation-theming-improvements
|
|
priority: P2
|
|
depends_on: [podtui-navigation-theming-improvements-09, podtui-navigation-theming-improvements-13]
|
|
tags: [integration, theming, app]
|
|
|
|
objective:
|
|
- Integrate theme provider into App component
|
|
- Apply theme tokens to all components
|
|
- Ensure theme changes are reactive
|
|
|
|
deliverables:
|
|
- Updated App.tsx with theme provider
|
|
- Theme application logic
|
|
- Theme integration tests
|
|
|
|
steps:
|
|
- Read references/solid/REFERENCE.md for SolidJS patterns
|
|
- Wrap App component with ThemeProvider
|
|
- Implement theme application in Layout component
|
|
- Apply theme tokens to all components:
|
|
- TabNavigation (active tab background)
|
|
- Navigation (footer navigation)
|
|
- DiscoverPage (background, borders, text colors)
|
|
- FeedList (background, borders, text colors)
|
|
- SettingsScreen (background, borders, text colors)
|
|
- SourceManager (background, borders, text colors)
|
|
- All other components
|
|
- Update theme tokens usage in src/constants/themes.ts
|
|
- Test theme application in all components
|
|
- Test theme changes are reactive
|
|
|
|
tests:
|
|
- Unit: Test theme provider integration
|
|
- Integration: Test theme changes in all components
|
|
|
|
acceptance_criteria:
|
|
- ThemeProvider is integrated into App component
|
|
- Theme tokens are applied to all components
|
|
- Theme changes are reactive
|
|
- All components render correctly with theme tokens
|
|
- No console errors related to theming
|
|
|
|
validation:
|
|
- Run `bun run start` and verify theme is applied
|
|
- Test theme selection and color scheme switching
|
|
- Test system theme detection
|
|
- Verify all components use theme tokens
|
|
- Check console for errors
|
|
|
|
notes:
|
|
- Use references/solid/REFERENCE.md for SolidJS patterns
|
|
- Follow opencode theming implementation patterns
|
|
- Ensure theme tokens are used consistently
|
|
- Test theme changes in all components
|
|
- Verify no hardcoded colors remain
|