mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-03-18 10:01:29 -07:00
feat(ui): refine /theme colors debug visualizer layout and styling
This commit is contained in:
Keith Guerin
@@ -134,57 +134,58 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
|
||||
];
|
||||
|
||||
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 flexDirection="column">
|
||||
<Text bold color={theme.text.accent}>
|
||||
DEVELOPER TOOLS (Not visible to users)
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
<Text bold>How themes and terminals interact:</Text>
|
||||
</Text>
|
||||
<Box marginLeft={2} flexDirection="column">
|
||||
<Text color={theme.text.primary}>
|
||||
<Text bold>How themes and terminals interact:</Text>
|
||||
• <Text bold>TrueColor (Hex):</Text> Modern terminals render hex
|
||||
codes exactly. They are <Text italic>not</Text> overridden by
|
||||
terminal app themes.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>ANSI Names:</Text> Colors like 'red' or
|
||||
'green' <Text italic>are</Text> mapped to your terminal
|
||||
app's specific palette.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Default colors:</Text> When Value is
|
||||
'(blank)', the app uses your terminal's default
|
||||
foreground/background.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Compatibility:</Text> In terminals with limited color,
|
||||
hex colors are automatically approximated to the closest available
|
||||
ANSI color.
|
||||
</Text>
|
||||
<Box marginLeft={2} flexDirection="column">
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>TrueColor (Hex):</Text> Modern terminals render hex
|
||||
codes exactly. They are <Text italic>not</Text> overridden by
|
||||
terminal app themes.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>ANSI Names:</Text> Colors like 'red' or
|
||||
'green' (used in our ANSI theme) <Text italic>are</Text>{' '}
|
||||
mapped to your terminal app's specific palette.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Default colors:</Text> When Name or Value is
|
||||
'(blank)', the app uses your terminal's default
|
||||
foreground/background.
|
||||
</Text>
|
||||
<Text color={theme.text.primary}>
|
||||
• <Text bold>Compatibility:</Text> In terminals with limited
|
||||
color, hex colors are automatically approximated to the closest
|
||||
available ANSI color.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Header */}
|
||||
<Box
|
||||
flexDirection="row"
|
||||
marginBottom={1}
|
||||
borderStyle="single"
|
||||
borderColor={theme.border.default}
|
||||
paddingX={1}
|
||||
>
|
||||
<Box flexDirection="row" marginBottom={0} paddingX={1}>
|
||||
<Box width={VALUE_COLUMN_WIDTH}>
|
||||
<Text bold color={theme.text.link}>
|
||||
<Text bold color={theme.text.link} dimColor>
|
||||
Value
|
||||
</Text>
|
||||
</Box>
|
||||
<Box width={NAME_COLUMN_WIDTH}>
|
||||
<Text bold color={theme.text.link}>
|
||||
<Text bold color={theme.text.link} dimColor>
|
||||
Name
|
||||
</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text bold color={theme.text.link}>
|
||||
<Text bold color={theme.text.link} dimColor>
|
||||
Usage
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -247,6 +247,11 @@ export function ThemeDialog({
|
||||
// The code block is slightly longer than the diff, so give it more space.
|
||||
const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6);
|
||||
const diffHeight = Math.floor(availableHeightForPanes * 0.4);
|
||||
|
||||
const previewTheme =
|
||||
themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) ||
|
||||
DEFAULT_THEME;
|
||||
|
||||
return (
|
||||
<Box
|
||||
borderStyle="round"
|
||||
@@ -330,58 +335,48 @@ export function ThemeDialog({
|
||||
<Text bold color={theme.text.primary}>
|
||||
Preview
|
||||
</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
|
||||
borderStyle="single"
|
||||
borderColor={theme.border.default}
|
||||
paddingTop={includePadding ? 1 : 0}
|
||||
paddingBottom={includePadding ? 1 : 0}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
flexDirection="column"
|
||||
>
|
||||
{colorizeCode({
|
||||
code: `# function
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderColor={theme.border.default}
|
||||
paddingTop={includePadding ? 1 : 0}
|
||||
paddingBottom={includePadding ? 1 : 0}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
flexDirection="column"
|
||||
>
|
||||
{colorizeCode({
|
||||
code: `# function
|
||||
def fibonacci(n):
|
||||
a, b = 0, 1
|
||||
for _ in range(n):
|
||||
a, b = b, a + b
|
||||
return a`,
|
||||
language: 'python',
|
||||
availableHeight:
|
||||
isAlternateBuffer === false ? codeBlockHeight : undefined,
|
||||
maxWidth: colorizeCodeWidth,
|
||||
settings,
|
||||
})}
|
||||
<Box marginTop={1} />
|
||||
<DiffRenderer
|
||||
diffContent={`--- a/util.py
|
||||
language: 'python',
|
||||
availableHeight:
|
||||
isAlternateBuffer === false ? codeBlockHeight : undefined,
|
||||
maxWidth: colorizeCodeWidth,
|
||||
settings,
|
||||
})}
|
||||
<Box marginTop={1} />
|
||||
<DiffRenderer
|
||||
diffContent={`--- a/util.py
|
||||
+++ b/util.py
|
||||
@@ -1,2 +1,2 @@
|
||||
- print("Hello, " + name)
|
||||
+ print(f"Hello, {name}!")
|
||||
`}
|
||||
availableTerminalHeight={
|
||||
isAlternateBuffer === false ? diffHeight : undefined
|
||||
}
|
||||
terminalWidth={colorizeCodeWidth}
|
||||
theme={previewTheme}
|
||||
/>
|
||||
{isDevelopment && (
|
||||
<Box marginTop={1}>
|
||||
<ColorsDisplay activeTheme={previewTheme} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
availableTerminalHeight={
|
||||
isAlternateBuffer === false ? diffHeight : undefined
|
||||
}
|
||||
terminalWidth={colorizeCodeWidth}
|
||||
theme={previewTheme}
|
||||
/>
|
||||
</Box>
|
||||
{isDevelopment && (
|
||||
<Box marginTop={1}>
|
||||
<ColorsDisplay activeTheme={previewTheme} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
|
||||
@@ -16,27 +16,27 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
|
||||
│ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │
|
||||
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
|
||||
│ 11. Ayu Light │ │ │
|
||||
│ 12. Default Light │ │ │
|
||||
│ ▼ │ How themes and terminals interact: │ │
|
||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals 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. │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────┐ │ │
|
||||
│ │ │ ValuName Usage │ │ │
|
||||
│ │ │ e │ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
@@ -81,9 +81,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────────┘ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (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) │ │
|
||||
│ 10. Ayu Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │
|
||||
│ 11. Default Dark (Incompatible) │ │ │
|
||||
│ 12. Dracula Dark (Incompatible) │ │ │
|
||||
│ ▼ │ How themes and terminals interact: │ │
|
||||
│ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals 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. │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────┐ │ │
|
||||
│ │ │ ValuName Usage │ │ │
|
||||
│ │ │ e │ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
@@ -172,9 +170,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────────┘ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (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) │ │
|
||||
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
|
||||
│ 11. Ayu Light │ │ │
|
||||
│ 12. Default Light │ │ │
|
||||
│ ▼ │ How themes and terminals interact: │ │
|
||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals 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. │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────┐ │ │
|
||||
│ │ │ ValuName Usage │ │ │
|
||||
│ │ │ e │ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
@@ -263,9 +259,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────────┘ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (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) │ │
|
||||
│ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │
|
||||
│ 11. Ayu Light │ │ │
|
||||
│ 12. Default Light │ │ │
|
||||
│ ▼ │ How themes and terminals interact: │ │
|
||||
│ 12. Default Light └─────────────────────────────────────────────────┘ │
|
||||
│ ▼ │
|
||||
│ ╭─────────────────────────────────────────────────╮ │
|
||||
│ │ DEVELOPER TOOLS (Not visible to users) │ │
|
||||
│ │ How themes and terminals interact: │ │
|
||||
│ │ • TrueColor (Hex): Modern terminals 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. │ │
|
||||
│ │ are mapped to your terminal app's specific │ │
|
||||
│ │ palette. │ │
|
||||
│ │ • Default colors: When Value is '(blank)', │ │
|
||||
│ │ the app uses your terminal's default │ │
|
||||
│ │ foreground/background. │ │
|
||||
│ │ • Compatibility: In terminals with limited │ │
|
||||
│ │ color, hex colors are automatically │ │
|
||||
│ │ approximated to the closest available ANSI │ │
|
||||
│ │ color. │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────┐ │ │
|
||||
│ │ │ ValuName Usage │ │ │
|
||||
│ │ │ e │ │ │
|
||||
│ │ └─────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ValuName Usage │ │
|
||||
│ │ e │ │
|
||||
│ │ #… background.pMain terminal background │ │
|
||||
│ │ rimary color │ │
|
||||
│ │ … backgroundSubtle background for message │ │
|
||||
@@ -368,9 +362,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
|
||||
│ │ CE │ │
|
||||
│ │ #C367 │ │
|
||||
│ │ 7F │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────────┘ │
|
||||
│ ╰─────────────────────────────────────────────────╯ │
|
||||
│ │
|
||||
│ (Use Enter to select, Tab to configure scope, Esc to close) │
|
||||
│ │
|
||||
|
||||
Reference in New Issue
Block a user