abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-20 16:57:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow themes to theme the UI (#769)

Browse Source
This commit is contained in:
Miguel Solorio
2025-06-05 14:35:47 -07:00
committed by GitHub
parent 2285bba66e
commit 8a0a2523ca
33 changed files with 533 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/cli/src/ui/components/AboutBox.tsx
View File

@@ -24,7 +24,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
}) => (
<Box
borderStyle="round"
borderColor={Colors.SubtleComment}
borderColor={Colors.Gray}
flexDirection="column"
padding={1}
marginY={1}

2
packages/cli/src/ui/components/AutoAcceptIndicator.tsx
View File

@@ -40,7 +40,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
<Box>
<Text color={textColor}>
{textContent}
{subText && <Text color={Colors.SubtleComment}>{subText}</Text>}
{subText && <Text color={Colors.Gray}>{subText}</Text>}
</Text>
</Box>
);

2
packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
View File

@@ -27,7 +27,7 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({
{errorCount > 0 && (
<Text color={Colors.AccentRed}>
{errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '}
<Text color={Colors.SubtleComment}>(ctrl+O for details)</Text>
<Text color={Colors.Gray}>(ctrl+O for details)</Text>
</Text>
)}
</Box>

2
packages/cli/src/ui/components/ContextSummaryDisplay.tsx
View File

@@ -47,5 +47,5 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
summaryText += mcpText;
}
return <Text color={Colors.SubtleComment}>{summaryText}</Text>;
return <Text color={Colors.Gray}>{summaryText}</Text>;
};

9
packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
View File

@@ -27,13 +27,12 @@ export const DetailedMessagesDisplay: React.FC<
flexDirection="column"
marginTop={1}
borderStyle="round"
borderColor={Colors.SubtleComment}
borderColor={Colors.Gray}
paddingX={1}
>
<Box marginBottom={1}>
<Text bold color={Colors.Foreground}>
Debug Console{' '}
<Text color={Colors.SubtleComment}>(ctrl+O to close)</Text>
Debug Console <Text color={Colors.Gray}>(ctrl+O to close)</Text>
</Text>
</Box>
{messages.map((msg, index) => {
@@ -50,7 +49,7 @@ export const DetailedMessagesDisplay: React.FC<
icon = '\u2716'; // Heavy multiplication x (✖)
break;
case 'debug':
textColor = Colors.SubtleComment; // Or Colors.Gray
textColor = Colors.Gray; // Or Colors.Gray
icon = '\u1F50D'; // Left-pointing magnifying glass (????)
break;
case 'log':
@@ -65,7 +64,7 @@ export const DetailedMessagesDisplay: React.FC<
<Text color={textColor} wrap="wrap">
{msg.content}
{msg.count && msg.count > 1 && (
<Text color={Colors.SubtleComment}> (x{msg.count})</Text>
<Text color={Colors.Gray}> (x{msg.count})</Text>
)}
</Text>
</Box>

14
packages/cli/src/ui/components/Footer.tsx
View File

@@ -40,9 +40,7 @@ export const Footer: React.FC<FooterProps> = ({
<Box>
<Text color={Colors.LightBlue}>
{shortenPath(tildeifyPath(targetDir), 70)}
{branchName && (
<Text color={Colors.SubtleComment}> ({branchName}*)</Text>
)}
{branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
</Text>
{debugMode && (
<Text color={Colors.AccentRed}>
@@ -65,13 +63,11 @@ export const Footer: React.FC<FooterProps> = ({
) : process.env.SANDBOX === 'sandbox-exec' ? (
<Text color={Colors.AccentYellow}>
sandbox-exec{' '}
<Text color={Colors.SubtleComment}>
({process.env.SEATBELT_PROFILE})
</Text>
<Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text>
</Text>
) : (
<Text color={Colors.AccentRed}>
no sandbox <Text color={Colors.SubtleComment}>(see README)</Text>
no sandbox <Text color={Colors.Gray}>(see README)</Text>
</Text>
)}
</Box>
@@ -81,7 +77,7 @@ export const Footer: React.FC<FooterProps> = ({
<Text color={Colors.AccentBlue}> {model} </Text>
{corgiMode && (
<Text>
<Text color={Colors.SubtleComment}>| </Text>
<Text color={Colors.Gray}>| </Text>
<Text color={Colors.AccentRed}>▼</Text>
<Text color={Colors.Foreground}>(´</Text>
<Text color={Colors.AccentRed}>ᴥ</Text>
@@ -91,7 +87,7 @@ export const Footer: React.FC<FooterProps> = ({
)}
{!showErrorDetails && errorCount > 0 && (
<Box>
<Text color={Colors.SubtleComment}>| </Text>
<Text color={Colors.Gray}>| </Text>
<ConsoleSummaryDisplay errorCount={errorCount} />
</Box>
)}

4
packages/cli/src/ui/components/Help.tsx
View File

@@ -31,7 +31,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
{commands
.filter((command) => command.description)
.map((command: SlashCommand) => (
<Text key={command.name} color={Colors.SubtleComment}>
<Text key={command.name} color={Colors.Gray}>
<Text bold color={Colors.AccentPurple}>
{' '}
/{command.name}
@@ -39,7 +39,7 @@ export const Help: React.FC<Help> = ({ commands }) => (
{command.description && ' - ' + command.description}
</Text>
))}
<Text color={Colors.SubtleComment}>
<Text color={Colors.Gray}>
<Text bold color={Colors.AccentPurple}>
{' '}
!{' '}

2
packages/cli/src/ui/components/InputPrompt.tsx
View File

@@ -349,7 +349,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
</Text>
<Box flexGrow={1} flexDirection="column">
{buffer.text.length === 0 && placeholder ? (
<Text color={Colors.SubtleComment}>{placeholder}</Text>
<Text color={Colors.Gray}>{placeholder}</Text>
) : (
linesToRender.map((lineText, visualIdxInRenderedSet) => {
const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;

2
packages/cli/src/ui/components/LoadingIndicator.tsx
View File

@@ -40,7 +40,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
{currentLoadingPhrase && (
<Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text>
)}
<Text color={Colors.SubtleComment}>
<Text color={Colors.Gray}>
{streamingState === StreamingState.WaitingForConfirmation
? ''
: ` (esc to cancel, ${elapsedTime}s)`}

10
packages/cli/src/ui/components/MemoryUsageDisplay.tsx
View File

@@ -12,18 +12,14 @@ import { formatMemoryUsage } from '../utils/formatters.js';
export const MemoryUsageDisplay: React.FC = () => {
const [memoryUsage, setMemoryUsage] = useState<string>('');
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(
Colors.SubtleComment,
);
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
useEffect(() => {
const updateMemory = () => {
const usage = process.memoryUsage().rss;
setMemoryUsage(formatMemoryUsage(usage));
setMemoryUsageColor(
usage >= 2 * 1024 * 1024 * 1024
? Colors.AccentRed
: Colors.SubtleComment,
usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
);
};
const intervalId = setInterval(updateMemory, 2000);
@@ -33,7 +29,7 @@ export const MemoryUsageDisplay: React.FC = () => {
return (
<Box>
<Text color={Colors.SubtleComment}>| </Text>
<Text color={Colors.Gray}>| </Text>
<Text color={memoryUsageColor}>{memoryUsage}</Text>
</Box>
);

2
packages/cli/src/ui/components/ShellModeIndicator.tsx
View File

@@ -12,7 +12,7 @@ export const ShellModeIndicator: React.FC = () => (
<Box>
<Text color={Colors.AccentYellow}>
shell mode enabled
<Text color={Colors.SubtleComment}> (esc to disable)</Text>
<Text color={Colors.Gray}> (esc to disable)</Text>
</Text>
</Box>
);

2
packages/cli/src/ui/components/SuggestionsDisplay.tsx
View File

@@ -57,7 +57,7 @@ export function SuggestionsDisplay({
{visibleSuggestions.map((suggestion, index) => {
const originalIndex = startIndex + index;
const isActive = originalIndex === activeIndex;
const textColor = isActive ? Colors.AccentPurple : Colors.SubtleComment;
const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
return (
<Box key={`${suggestion}-${originalIndex}`} width={width}>

11
packages/cli/src/ui/components/ThemeDialog.tsx
View File

@@ -97,7 +97,7 @@ export function ThemeDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.SubtleComment}
borderColor={Colors.Gray}
flexDirection="row"
padding={1}
width="100%"
@@ -106,7 +106,7 @@ export function ThemeDialog({
<Box flexDirection="column" width="45%" paddingRight={2}>
<Text bold={focusedSection === 'theme'}>
{focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text>
<Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
</Text>
<RadioButtonSelect
key={selectInputKey}
@@ -132,7 +132,7 @@ export function ThemeDialog({
</Box>
<Box marginTop={1}>
<Text color={Colors.SubtleComment}>
<Text color={Colors.Gray}>
(Use Enter to select, Tab to change focus)
</Text>
</Box>
@@ -143,12 +143,13 @@ export function ThemeDialog({
<Text bold>Preview</Text>
<Box
borderStyle="single"
borderColor={Colors.SubtleComment}
borderColor={Colors.Gray}
padding={1}
flexDirection="column"
>
{colorizeCode(
`def fibonacci(n):
`# function
def fibonacci(n):
a, b = 0, 1
for _ in range(n):
a, b = b, a + b

8
packages/cli/src/ui/components/messages/DiffRenderer.tsx
View File

@@ -107,7 +107,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
if (parsedLines.length === 0) {
return (
<Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
<Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
<Text dimColor>No changes detected.</Text>
</Box>
);
@@ -162,7 +162,7 @@ const renderDiffContent = (
if (displayableLines.length === 0) {
return (
<Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
<Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
<Text dimColor>No changes detected.</Text>
</Box>
);
@@ -217,7 +217,7 @@ const renderDiffContent = (
borderRight={false}
borderLeft={false}
borderStyle="double"
borderColor={Colors.SubtleComment}
borderColor={Colors.Gray}
></Box>,
);
}
@@ -260,7 +260,7 @@ const renderDiffContent = (
acc.push(
<Box key={lineKey} flexDirection="row">
<Text color={Colors.SubtleComment}>{gutterNumStr.padEnd(4)} </Text>
<Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text>
<Text color={color} dimColor={dim}>
{prefixSymbol}{' '}
</Text>

2
packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
View File

@@ -25,7 +25,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
const hasPending = !toolCalls.every(
(t) => t.status === ToolCallStatus.Success,
);
const borderColor = hasPending ? Colors.AccentYellow : Colors.SubtleComment;
const borderColor = hasPending ? Colors.AccentYellow : Colors.Gray;
const staticHeight = /* border */ 2 + /* marginBottom */ 1;

6
packages/cli/src/ui/components/messages/ToolMessage.tsx
View File

@@ -72,7 +72,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
<Box flexDirection="column">
{hiddenLines > 0 && (
<Box>
<Text color={Colors.SubtleComment}>
<Text color={Colors.Gray}>
... first {hiddenLines} line{hiddenLines === 1 ? '' : 's'}{' '}
hidden ...
</Text>
@@ -162,7 +162,7 @@ const ToolInfo: React.FC<ToolInfo> = ({
case 'medium':
return Colors.Foreground;
case 'low':
return Colors.SubtleComment;
return Colors.Gray;
default: {
const exhaustiveCheck: never = emphasis;
return exhaustiveCheck;
@@ -178,7 +178,7 @@ const ToolInfo: React.FC<ToolInfo> = ({
<Text color={nameColor} bold>
{name}
</Text>{' '}
<Text color={Colors.SubtleComment}>{description}</Text>
<Text color={Colors.Gray}>{description}</Text>
</Text>
</Box>
);

4
packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
View File

@@ -111,9 +111,7 @@ export function RadioButtonSelect<T>({
return (
<Text color={textColor}>
{itemWithThemeProps.themeNameDisplay}{' '}
<Text color={Colors.SubtleComment}>
{itemWithThemeProps.themeTypeDisplay}
</Text>
<Text color={Colors.Gray}>{itemWithThemeProps.themeTypeDisplay}</Text>
</Text>
);
}