MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-05-13 05:12:55 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): refine /theme colors debug visualizer layout and styling

Browse Source
This commit is contained in:
Keith Guerin
2026-02-26 14:31:32 -08:00
parent 067d8982d6
commit a651fc2a0d
3 changed files with 125 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/ui/components/ColorsDisplay.tsx
+20 -19
View File
@@ -134,9 +134,17 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
]; ];
return ( return (
<Box flexDirection="column" paddingX={0} marginY={1}> <Box
flexDirection="column"
paddingX={1}
paddingY={0}
borderStyle="round"
borderColor={theme.border.default}
>
<Box marginBottom={1} flexDirection="column"> <Box marginBottom={1} flexDirection="column">
<Box flexDirection="column"> <Text bold color={theme.text.accent}>
DEVELOPER TOOLS (Not visible to users)
</Text>
<Text color={theme.text.primary}> <Text color={theme.text.primary}>
<Text bold>How themes and terminals interact:</Text> <Text bold>How themes and terminals interact:</Text>
</Text> </Text>
@@ -148,43 +156,36 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
</Text> </Text>
<Text color={theme.text.primary}> <Text color={theme.text.primary}>
• <Text bold>ANSI Names:</Text> Colors like &apos;red&apos; or • <Text bold>ANSI Names:</Text> Colors like &apos;red&apos; or
&apos;green&apos; (used in our ANSI theme) <Text italic>are</Text>{' '} &apos;green&apos; <Text italic>are</Text> mapped to your terminal
mapped to your terminal app&apos;s specific palette. app&apos;s specific palette.
</Text> </Text>
<Text color={theme.text.primary}> <Text color={theme.text.primary}>
• <Text bold>Default colors:</Text> When Name or Value is • <Text bold>Default colors:</Text> When Value is
&apos;(blank)&apos;, the app uses your terminal&apos;s default &apos;(blank)&apos;, the app uses your terminal&apos;s default
foreground/background. foreground/background.
</Text> </Text>
<Text color={theme.text.primary}> <Text color={theme.text.primary}>
• <Text bold>Compatibility:</Text> In terminals with limited • <Text bold>Compatibility:</Text> In terminals with limited color,
color, hex colors are automatically approximated to the closest hex colors are automatically approximated to the closest available
available ANSI color. ANSI color.
</Text> </Text>
</Box> </Box>
</Box> </Box>
</Box>
{/* Header */} {/* Header */}
<Box <Box flexDirection="row" marginBottom={0} paddingX={1}>
flexDirection="row"
marginBottom={1}
borderStyle="single"
borderColor={theme.border.default}
paddingX={1}
>
<Box width={VALUE_COLUMN_WIDTH}> <Box width={VALUE_COLUMN_WIDTH}>
<Text bold color={theme.text.link}> <Text bold color={theme.text.link} dimColor>
Value Value
</Text> </Text>
</Box> </Box>
<Box width={NAME_COLUMN_WIDTH}> <Box width={NAME_COLUMN_WIDTH}>
<Text bold color={theme.text.link}> <Text bold color={theme.text.link} dimColor>
Name Name
</Text> </Text>
</Box> </Box>
<Box flexGrow={1}> <Box flexGrow={1}>
<Text bold color={theme.text.link}> <Text bold color={theme.text.link} dimColor>
Usage Usage
</Text> </Text>
</Box> </Box>
packages/cli/src/ui/components/ThemeDialog.tsx
+6 -11
View File
@@ -247,6 +247,11 @@ export function ThemeDialog({
// The code block is slightly longer than the diff, so give it more space. // The code block is slightly longer than the diff, so give it more space.
const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6); const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6);
const diffHeight = Math.floor(availableHeightForPanes * 0.4); const diffHeight = Math.floor(availableHeightForPanes * 0.4);
const previewTheme =
themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) ||
DEFAULT_THEME;
return ( return (
<Box <Box
borderStyle="round" borderStyle="round"
@@ -330,14 +335,6 @@ export function ThemeDialog({
<Text bold color={theme.text.primary}> <Text bold color={theme.text.primary}>
Preview Preview
</Text> </Text>
{/* Get the Theme object for the highlighted theme, fall back to default if not found */}
{(() => {
const previewTheme =
themeManager.getTheme(
highlightedThemeName || DEFAULT_THEME.name,
) || DEFAULT_THEME;
return (
<Box <Box
borderStyle="single" borderStyle="single"
borderColor={theme.border.default} borderColor={theme.border.default}
@@ -374,15 +371,13 @@ def fibonacci(n):
terminalWidth={colorizeCodeWidth} terminalWidth={colorizeCodeWidth}
theme={previewTheme} theme={previewTheme}
/> />
</Box>
{isDevelopment && ( {isDevelopment && (
<Box marginTop={1}> <Box marginTop={1}>
<ColorsDisplay activeTheme={previewTheme} /> <ColorsDisplay activeTheme={previewTheme} />
</Box> </Box>
)} )}
</Box> </Box>
);
})()}
</Box>
</Box> </Box>
) : ( ) : (
<ScopeSelector <ScopeSelector
packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
+52 -60
View File
@@ -16,27 +16,27 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. Ayu Light │ │ │ │ 11. Ayu Light │ │ │
│ 12. Default Light │ │ │ │ 12. Default Light └─────────────────────────────────────────────────┘ │
│ ▼ │ How themes and terminals interact: │ │ │ ▼ │
│ ╭─────────────────────────────────────────────────╮ │
│ │ DEVELOPER TOOLS (Not visible to users) │ │
│ │ How themes and terminals interact: │ │
│ │ • TrueColor (Hex): Modern terminals render │ │ │ │ • TrueColor (Hex): Modern terminals render │ │
│ │ hex codes exactly. They are not overridden by │ │ │ │ hex codes exactly. They are not overridden by │ │
│ │ terminal app themes. │ │ │ │ terminal app themes. │ │
│ │ • ANSI Names: Colors like 'red' or 'green' │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │
│ │ (used in our ANSI theme) are mapped to your │ │ │ │ are mapped to your terminal app's specific │ │
│ │ terminal app's specific palette. │ │ │ │ palette. │ │
│ │ • Default colors: When Name or Value is │ │ │ │ • Default colors: When Value is '(blank)', │ │
│ │ '(blank)', the app uses your terminal's │ │ │ │ the app uses your terminal's default │ │
│ │ default foreground/background. │ │ │ │ foreground/background. │ │
│ │ • Compatibility: In terminals with limited │ │ │ │ • Compatibility: In terminals with limited │ │
│ │ color, hex colors are automatically │ │ │ │ color, hex colors are automatically │ │
│ │ approximated to the closest available ANSI │ │ │ │ approximated to the closest available ANSI │ │
│ │ color. │ │ │ │ color. │ │
│ │ │ │ │ │ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │ │ │ ValuName Usage │ │
│ │ │ ValuName Usage │ │ │ │ │ e │ │
│ │ │ e │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ #… background.pMain terminal background │ │ │ │ #… background.pMain terminal background │ │
│ │ rimary color │ │ │ │ rimary color │ │
│ │ … backgroundSubtle background for message │ │ │ │ … backgroundSubtle background for message │ │
@@ -81,9 +81,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
│ │ CE │ │ │ │ CE │ │
│ │ #C367 │ │ │ │ #C367 │ │
│ │ 7F │ │ │ │ 7F │ │
│ │ │ │ │ ╰─────────────────────────────────────────────────╯ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │ │ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │ │ │
@@ -107,27 +105,27 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
│ 9. Atom One Dark (Incompatible) │ 1 - print("Hello, " + name) │ │ │ 9. Atom One Dark (Incompatible) │ 1 - print("Hello, " + name) │ │
│ 10. Ayu Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │ │ 10. Ayu Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │
│ 11. Default Dark (Incompatible) │ │ │ │ 11. Default Dark (Incompatible) │ │ │
│ 12. Dracula Dark (Incompatible) │ │ │ │ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │
│ ▼ │ How themes and terminals interact: │ │ │ ▼ │
│ ╭─────────────────────────────────────────────────╮ │
│ │ DEVELOPER TOOLS (Not visible to users) │ │
│ │ How themes and terminals interact: │ │
│ │ • TrueColor (Hex): Modern terminals render │ │ │ │ • TrueColor (Hex): Modern terminals render │ │
│ │ hex codes exactly. They are not overridden by │ │ │ │ hex codes exactly. They are not overridden by │ │
│ │ terminal app themes. │ │ │ │ terminal app themes. │ │
│ │ • ANSI Names: Colors like 'red' or 'green' │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │
│ │ (used in our ANSI theme) are mapped to your │ │ │ │ are mapped to your terminal app's specific │ │
│ │ terminal app's specific palette. │ │ │ │ palette. │ │
│ │ • Default colors: When Name or Value is │ │ │ │ • Default colors: When Value is '(blank)', │ │
│ │ '(blank)', the app uses your terminal's │ │ │ │ the app uses your terminal's default │ │
│ │ default foreground/background. │ │ │ │ foreground/background. │ │
│ │ • Compatibility: In terminals with limited │ │ │ │ • Compatibility: In terminals with limited │ │
│ │ color, hex colors are automatically │ │ │ │ color, hex colors are automatically │ │
│ │ approximated to the closest available ANSI │ │ │ │ approximated to the closest available ANSI │ │
│ │ color. │ │ │ │ color. │ │
│ │ │ │ │ │ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │ │ │ ValuName Usage │ │
│ │ │ ValuName Usage │ │ │ │ │ e │ │
│ │ │ e │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ #… background.pMain terminal background │ │ │ │ #… background.pMain terminal background │ │
│ │ rimary color │ │ │ │ rimary color │ │
│ │ … backgroundSubtle background for message │ │ │ │ … backgroundSubtle background for message │ │
@@ -172,9 +170,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
│ │ CE │ │ │ │ CE │ │
│ │ #C367 │ │ │ │ #C367 │ │
│ │ 7F │ │ │ │ 7F │ │
│ │ │ │ │ ╰─────────────────────────────────────────────────╯ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │ │ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │ │ │
@@ -198,27 +194,27 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. Ayu Light │ │ │ │ 11. Ayu Light │ │ │
│ 12. Default Light │ │ │ │ 12. Default Light └─────────────────────────────────────────────────┘ │
│ ▼ │ How themes and terminals interact: │ │ │ ▼ │
│ ╭─────────────────────────────────────────────────╮ │
│ │ DEVELOPER TOOLS (Not visible to users) │ │
│ │ How themes and terminals interact: │ │
│ │ • TrueColor (Hex): Modern terminals render │ │ │ │ • TrueColor (Hex): Modern terminals render │ │
│ │ hex codes exactly. They are not overridden by │ │ │ │ hex codes exactly. They are not overridden by │ │
│ │ terminal app themes. │ │ │ │ terminal app themes. │ │
│ │ • ANSI Names: Colors like 'red' or 'green' │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │
│ │ (used in our ANSI theme) are mapped to your │ │ │ │ are mapped to your terminal app's specific │ │
│ │ terminal app's specific palette. │ │ │ │ palette. │ │
│ │ • Default colors: When Name or Value is │ │ │ │ • Default colors: When Value is '(blank)', │ │
│ │ '(blank)', the app uses your terminal's │ │ │ │ the app uses your terminal's default │ │
│ │ default foreground/background. │ │ │ │ foreground/background. │ │
│ │ • Compatibility: In terminals with limited │ │ │ │ • Compatibility: In terminals with limited │ │
│ │ color, hex colors are automatically │ │ │ │ color, hex colors are automatically │ │
│ │ approximated to the closest available ANSI │ │ │ │ approximated to the closest available ANSI │ │
│ │ color. │ │ │ │ color. │ │
│ │ │ │ │ │ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │ │ │ ValuName Usage │ │
│ │ │ ValuName Usage │ │ │ │ │ e │ │
│ │ │ e │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ #… background.pMain terminal background │ │ │ │ #… background.pMain terminal background │ │
│ │ rimary color │ │ │ │ rimary color │ │
│ │ … backgroundSubtle background for message │ │ │ │ … backgroundSubtle background for message │ │
@@ -263,9 +259,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
│ │ CE │ │ │ │ CE │ │
│ │ #C367 │ │ │ │ #C367 │ │
│ │ 7F │ │ │ │ 7F │ │
│ │ │ │ │ ╰─────────────────────────────────────────────────╯ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │ │ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │ │ │
@@ -303,27 +297,27 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
│ 11. Ayu Light │ │ │ │ 11. Ayu Light │ │ │
│ 12. Default Light │ │ │ │ 12. Default Light └─────────────────────────────────────────────────┘ │
│ ▼ │ How themes and terminals interact: │ │ │ ▼ │
│ ╭─────────────────────────────────────────────────╮ │
│ │ DEVELOPER TOOLS (Not visible to users) │ │
│ │ How themes and terminals interact: │ │
│ │ • TrueColor (Hex): Modern terminals render │ │ │ │ • TrueColor (Hex): Modern terminals render │ │
│ │ hex codes exactly. They are not overridden by │ │ │ │ hex codes exactly. They are not overridden by │ │
│ │ terminal app themes. │ │ │ │ terminal app themes. │ │
│ │ • ANSI Names: Colors like 'red' or 'green' │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │
│ │ (used in our ANSI theme) are mapped to your │ │ │ │ are mapped to your terminal app's specific │ │
│ │ terminal app's specific palette. │ │ │ │ palette. │ │
│ │ • Default colors: When Name or Value is │ │ │ │ • Default colors: When Value is '(blank)', │ │
│ │ '(blank)', the app uses your terminal's │ │ │ │ the app uses your terminal's default │ │
│ │ default foreground/background. │ │ │ │ foreground/background. │ │
│ │ • Compatibility: In terminals with limited │ │ │ │ • Compatibility: In terminals with limited │ │
│ │ color, hex colors are automatically │ │ │ │ color, hex colors are automatically │ │
│ │ approximated to the closest available ANSI │ │ │ │ approximated to the closest available ANSI │ │
│ │ color. │ │ │ │ color. │ │
│ │ │ │ │ │ │ │
│ │ ┌─────────────────────────────────────────────┐ │ │ │ │ ValuName Usage │ │
│ │ │ ValuName Usage │ │ │ │ │ e │ │
│ │ │ e │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ #… background.pMain terminal background │ │ │ │ #… background.pMain terminal background │ │
│ │ rimary color │ │ │ │ rimary color │ │
│ │ … backgroundSubtle background for message │ │ │ │ … backgroundSubtle background for message │ │
@@ -368,9 +362,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
│ │ CE │ │ │ │ CE │ │
│ │ #C367 │ │ │ │ #C367 │ │
│ │ 7F │ │ │ │ 7F │ │
│ │ │ │ │ ╰─────────────────────────────────────────────────╯ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │ │ (Use Enter to select, Tab to configure scope, Esc to close) │
│ │ │ │