PodTui/tasks/subtasks/theme-refactoring-10-theme-switching.md

10. Test Theme Switching and Light/Dark Mode

meta: id: theme-refactoring-10 feature: theme-refactoring-json-format priority: P0 depends_on: [theme-refactoring-05, theme-refactoring-09] tags: [testing, verification]

objective:

• Comprehensive testing of theme switching functionality
• Verify light/dark mode switching works correctly
• Test all theme JSON files load and apply correctly
• Ensure theme persistence works across sessions

deliverables:

• src/utils/theme.test.ts - Theme utility tests
• src/context/ThemeContext.test.ts - Context tests
• Test results showing all themes work correctly

steps:

• Step 10.1: Create src/utils/theme.test.ts

  • Test theme loading functions
  • Test theme resolution logic
  • Test color reference resolution
  • Test ANSI color conversion

• Step 10.2: Create src/context/ThemeContext.test.ts

  • Test theme context initialization
  • Test theme switching
  • Test mode switching
  • Test system theme detection
  • Test localStorage persistence
  • Test reactive theme updates

• Step 10.3: Manual testing

  • Test switching between all themes (catppuccin, gruvbox, tokyo, nord)
  • Test light/dark mode switching
  • Test system theme detection
  • Test theme persistence (close and reopen app)
  • Test custom theme loading

• Step 10.4: Visual verification

  • Verify all theme colors are correct
  • Check readability of text colors
  • Verify background colors are appropriate
  • Check that all UI elements use theme colors

tests:

• Unit:

  • Run all theme utility tests
  • Run all theme context tests
  • Verify all tests pass

• Integration/e2e:

  • Test theme switching in application
  • Test light/dark mode switching
  • Test theme persistence
  • Test system theme detection

acceptance_criteria:

• All unit tests pass
• All integration tests pass
• Theme switching works correctly
• Light/dark mode switching works correctly
• All themes load and apply correctly
• Theme persistence works across sessions

validation:

• Run: bun test src/utils/theme.test.ts
• Run: bun test src/context/ThemeContext.test.ts
• Run: bun test - Run all tests
• Manual testing of all themes
• Visual verification of theme appearance

notes:

• Test with actual terminal to verify system theme detection
• Verify all theme colors are visually appealing
• Check for any color contrast issues
• Test edge cases (missing themes, invalid colors)