PodTui/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md

13. Implement System Theme Detection

meta: id: podtui-navigation-theming-improvements-13 feature: podtui-navigation-theming-improvements priority: P2 depends_on: [podtui-navigation-theming-improvements-12] tags: [theming, implementation, system-theme]

objective:

• Implement system theme detection (prefers-color-scheme)
• Add theme mode management (light/dark/auto)
• Implement automatic theme switching based on system preferences

deliverables:

• System theme detection implementation
• Theme mode management functions
• Automatic theme switching logic

steps:

• Read opencode/packages/ui/src/theme/context.tsx for reference
• Implement getSystemMode function
• Add theme mode state to theme context
• Implement colorScheme state management
• Add window.matchMedia listener for system theme changes
• Implement automatic mode switching when colorScheme is "system"
• Add theme mode persistence to localStorage
• Test system theme detection
• Test automatic theme switching

tests:

• Unit: Test system theme detection with mocked media queries
• Integration: Test theme mode switching

acceptance_criteria:

• getSystemMode function works correctly
• Theme mode state is managed correctly
• Window.matchMedia listener works correctly
• Automatic theme switching works when colorScheme is "system"
• Theme mode persistence to localStorage works
• System theme changes are detected and applied

validation:

• Run bun run start and test system theme detection
• Test switching system between light/dark modes
• Verify automatic theme switching works
• Check localStorage persistence
• Test theme mode selection (system/light/dark)

notes:

• Use references/solid/REFERENCE.md for SolidJS patterns
• Follow opencode theming implementation patterns
• Ensure proper cleanup in onCleanup
• Test with different system theme settings
• Verify theme updates are reactive