PodTui/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md

09. Create Theme Context Provider

meta: id: podtui-navigation-theming-improvements-09 feature: podtui-navigation-theming-improvements priority: P2 depends_on: [] tags: [theming, implementation, solid-js]

objective:

• Create theme context provider based on opencode implementation
• Implement theme state management
• Provide theme tokens to all components

deliverables:

• Theme context provider component
• Theme state management hooks
• Theme provider integration

steps:

• Read opencode/packages/ui/src/theme/context.tsx for reference
• Create theme context using SolidJS createContext
• Design theme state structure (themeId, colorScheme, mode, etc.)
• Implement theme state management with signals
• Add theme selection and color scheme management functions
• Create ThemeProvider component
• Add theme persistence to localStorage
• Implement system theme detection
• Add theme change listeners
• Test theme context provider

tests:

• Unit: Test theme context provider with mocked state
• Integration: Test theme provider integration

acceptance_criteria:

• Theme context provider is created
• Theme state management works correctly
• Theme selection and color scheme management functions work
• Theme persistence to localStorage works
• System theme detection works
• Theme change listeners work
• Theme provider can be used to wrap App component

validation:

• Run bun run start and verify theme context provider works
• Test theme selection functionality
• Test color scheme switching
• Verify localStorage persistence
• Check system theme detection

notes:

• Use references/solid/REFERENCE.md for SolidJS patterns
• Follow opencode theming implementation patterns
• Use createSignal for reactive theme state
• Ensure proper cleanup in onCleanup
• Test with different theme configurations