PodTui/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md

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