PodTui/tasks/podcast-tui-app/63-tokyo-theme.md

63. Add Tokyo Night Theme

meta: id: podcast-tui-app-63 feature: podcast-tui-app priority: P1 depends_on: [59] tags: [theming, tokyo-night, solidjs, modern]

objective:

• Implement Tokyo Night theme for the podcast TUI
• Provide modern, vibrant color scheme
• Ensure good contrast and readability
• Support both dark and light variants

deliverables:

• /src/themes/themes/tokyo-night.ts - Tokyo Night theme definition
• /src/themes/themes/tokyo-night-day.ts - Light mode Tokyo Night
• /src/themes/themes/tokyo-night-night.ts - Dark mode Tokyo Night
• Updated /src/themes/themes/index.ts to export Tokyo Night themes

steps:

• Research and implement Tokyo Night theme color palette
• Define all color tokens (background, foreground, primary, secondary, etc.)
• Create Tokyo Night Night (dark) theme
• Create Tokyo Night Day (light) theme
• Ensure proper color contrast for accessibility
• Add Tokyo Night to theme registry

tests:

• Unit: Verify Tokyo Night theme colors are defined
• Unit: Test Tokyo Night Night renders correctly
• Unit: Test Tokyo Night Day renders correctly
• Visual: Verify Tokyo Night colors are visually appealing

acceptance_criteria:

• Tokyo Night Night theme works in dark terminals
• Tokyo Night Day theme works in light terminals
• Colors match official Tokyo Night design
• Theme is selectable from theme list

validation:

• Run bun run build to verify TypeScript compilation
• Test Tokyo Night theme manually in application
• Compare with official Tokyo Night color palette
• Check color harmony and contrast

notes:

• Tokyo Night Night is the recommended variant
• Include all standard Tokyo Night colors
• Use official color values from Tokyo Night repository
• Tokyo Night is popular for its modern, clean look