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})