Repository navigation
Implement theming system for Ink components #11776
Description
Parent Epic
Part of #11762 (Ink-based TUI Rewrite)
Objective
Create theming system for consistent colors and styling across all Ink components.
Current Theme (from theme.ts)
const theme = {
tool: {
running: { icon: fg.yellow, text: fg.gray },
done: { icon: fg.green, text: fg.gray },
error: { icon: fg.red, text: fg.gray },
denied: { icon: fg.red, text: fg.gray }
},
task: {
running: { icon: fg.yellow, text: fg.cyan },
done: { icon: fg.green, text: fg.cyan }
},
prompt: {
agent: fg.cyan,
separator: fg.cyan
}
}Ink Theme Approach
// src/cli/ink/theme/index.ts
export const theme = {
colors: {
primary: 'cyan',
success: 'green',
warning: 'yellow',
error: 'red',
muted: 'gray'
},
tool: {
running: { icon: 'yellow', text: 'gray' },
done: { icon: 'green', text: 'gray' },
error: { icon: 'red', text: 'gray' },
denied: { icon: 'red', text: 'gray' }
},
task: {
running: { icon: 'yellow', text: 'cyan' },
done: { icon: 'green', text: 'cyan' }
},
prompt: {
agent: 'cyan',
separator: 'cyan',
symbol: '❯'
},
status: {
dimColor: true
}
}
// Usage in components
import { theme } from '../theme'
const ToolDisplay = ({ status }) => (
<Text color={theme.tool[status].text}>...</Text>
)Tasks
- Create
src/cli/ink/theme/index.tswith theme object - Create
src/cli/ink/theme/context.tsxfor theme provider (optional) - Port existing color values from theme.ts
- Document all theme tokens
- Update all components to use theme
- Consider dark/light mode support (future)
Acceptance Criteria
- All components use theme values
- No hardcoded colors in components
- Theme matches current lite appearance
- Easy to modify colors in one place
Estimated Effort
0.5 days
Risk
Low - organizational task
Dependencies
- Setup Ink dependencies and verify Bun compatibility #11763 (Setup Ink dependencies)
Activity
randomm commentedon Feb 2, 2026
Research Note
Theming can be combined with #11764 (App component) in a single PR since:
Will implement theme first, then App component references it.
feat(opencode): implement Ink TUI foundation (anomalyco#11763, anomal…
feat(opencode): implement Ink TUI foundation (anomalyco#11763, anomal…
feat(opencode): add Ink-based TUI components for oclite