diff --git a/packages/cli/src/ui/components/ColorsDisplay.tsx b/packages/cli/src/ui/components/ColorsDisplay.tsx index d0845f7e2f..fc953ed5a5 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.tsx @@ -134,35 +134,33 @@ export const ColorsDisplay: React.FC = () => { /colors - Theme Colors Demo - + The purpose of this feature is to visualize how colors are used in the app, test across a variety of Terminals (Mac Terminal, Ghostty, iTerm2, VSCode, etc), and see how the colors change across different themes. - - - How themes and terminals interact: - + + How themes and terminals interact: - + TrueColor (Hex): Modern terminals (iTerm2, Ghostty, VSCode) render hex codes exactly. They are{' '} not overridden by terminal app themes. - + ANSI Names: Colors like 'red' or 'green' (used in our ANSI theme) are{' '} mapped to your terminal app's specific palette. - + Default colors: When Name or Value is '(blank)', the app uses your terminal's default foreground/background. - + Compatibility: In terminals with limited color (like older Mac Terminals), hex colors are automatically approximated to the closest available ANSI color. @@ -170,9 +168,9 @@ export const ColorsDisplay: React.FC = () => { - + Active Theme:{' '} - + {activeTheme.name} {' '} ({activeTheme.type})