Allow themes to theme the UI (#769)

packages/cli/src/ui/colors.ts

@@ -38,8 +38,8 @@ export const Colors: ColorsTheme = {
   get AccentRed() {
     return themeManager.getActiveTheme().colors.AccentRed;
   },
-  get SubtleComment() {
+  get Comment() {
-    return themeManager.getActiveTheme().colors.SubtleComment;
+    return themeManager.getActiveTheme().colors.Comment;
   },
   get Gray() {
     return themeManager.getActiveTheme().colors.Gray;

packages/cli/src/ui/components/AboutBox.tsx

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

packages/cli/src/ui/components/AutoAcceptIndicator.tsx

@@ -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>
   );

packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx

@@ -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>

packages/cli/src/ui/components/ContextSummaryDisplay.tsx

@@ -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>;
 };

packages/cli/src/ui/components/DetailedMessagesDisplay.tsx

@@ -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{' '}
+          Debug Console <Text color={Colors.Gray}>(ctrl+O to close)</Text>
-          <Text color={Colors.SubtleComment}>(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>

packages/cli/src/ui/components/Footer.tsx

@@ -40,9 +40,7 @@ export const Footer: React.FC<FooterProps> = ({
     <Box>
       <Text color={Colors.LightBlue}>
         {shortenPath(tildeifyPath(targetDir), 70)}
-        {branchName && (
+        {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>}
-          <Text color={Colors.SubtleComment}> ({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}>
+          <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text>
-            ({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>
       )}

packages/cli/src/ui/components/Help.tsx

@@ -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}>
         {' '}
         !{' '}

packages/cli/src/ui/components/InputPrompt.tsx

@@ -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;

packages/cli/src/ui/components/LoadingIndicator.tsx

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

packages/cli/src/ui/components/MemoryUsageDisplay.tsx

@@ -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>(
+  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
-    Colors.SubtleComment,
-  );
 
   useEffect(() => {
     const updateMemory = () => {
       const usage = process.memoryUsage().rss;
       setMemoryUsage(formatMemoryUsage(usage));
       setMemoryUsageColor(
-        usage >= 2 * 1024 * 1024 * 1024
+        usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
-          ? Colors.AccentRed
-          : Colors.SubtleComment,
       );
     };
     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>
   );

packages/cli/src/ui/components/ShellModeIndicator.tsx

@@ -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>
 );

packages/cli/src/ui/components/SuggestionsDisplay.tsx

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

packages/cli/src/ui/components/ThemeDialog.tsx

@@ -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

packages/cli/src/ui/components/messages/DiffRenderer.tsx

@@ -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>

packages/cli/src/ui/components/messages/ToolGroupMessage.tsx

@@ -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;
 

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -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>
   );

packages/cli/src/ui/components/shared/RadioButtonSelect.tsx

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

packages/cli/src/ui/themes/ansi-light.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ansiLightColors: ColorsTheme = {
+  type: 'light',
+  Background: 'white',
+  Foreground: 'black',
+  LightBlue: 'blue',
+  AccentBlue: 'blue',
+  AccentPurple: 'purple',
+  AccentCyan: 'cyan',
+  AccentGreen: 'green',
+  AccentYellow: 'orange',
+  AccentRed: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
+  GradientColors: lightTheme.GradientColors,
+};
 
 export const ANSILight: Theme = new Theme(
   'ANSI Light',
@@ -126,5 +142,5 @@ export const ANSILight: Theme = new Theme(
       color: 'orange',
     },
   },
-  lightTheme,
+  ansiLightColors,
 );

packages/cli/src/ui/themes/ansi.ts

@@ -4,11 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ansiColors: ColorsTheme = {
+  type: 'dark',
+  Background: 'black',
+  Foreground: 'white',
+  LightBlue: 'bluebright',
+  AccentBlue: '#0000FF',
+  AccentPurple: 'magenta',
+  AccentCyan: 'cyan',
+  AccentGreen: 'green',
+  AccentYellow: 'yellow',
+  AccentRed: 'red',
+  Comment: 'gray',
+  Gray: 'gray',
+  GradientColors: darkTheme.GradientColors, // Fallback
+};
 
 export const ANSI: Theme = new Theme(
   'ANSI',
-  'dark',
+  'dark', // Consistent with its color palette base
   {
     hljs: {
       display: 'block',
@@ -135,5 +151,5 @@ export const ANSI: Theme = new Theme(
       color: 'yellow', // Mapped from #D7BA7D
     },
   },
-  darkTheme,
+  ansiColors,
 );

packages/cli/src/ui/themes/atom-one-dark.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const atomOneDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#282c34',
+  Foreground: '#abb2bf',
+  LightBlue: '#61aeee',
+  AccentBlue: '#61aeee',
+  AccentPurple: '#c678dd',
+  AccentCyan: '#56b6c2',
+  AccentGreen: '#98c379',
+  AccentYellow: '#e6c07b',
+  AccentRed: '#e06c75',
+  Comment: '#5c6370',
+  Gray: '#5c6370',
+  GradientColors: darkTheme.GradientColors,
+};
 
 export const AtomOneDark: Theme = new Theme(
   'Atom One',
@@ -14,107 +30,107 @@ export const AtomOneDark: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      color: '#abb2bf',
+      color: atomOneDarkColors.Foreground,
-      background: '#282c34',
+      background: atomOneDarkColors.Background,
     },
     'hljs-comment': {
-      color: '#5c6370',
+      color: atomOneDarkColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#5c6370',
+      color: atomOneDarkColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-doctag': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
     },
     'hljs-keyword': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
     },
     'hljs-formula': {
-      color: '#c678dd',
+      color: atomOneDarkColors.AccentPurple,
     },
     'hljs-section': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
     },
     'hljs-name': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
     },
     'hljs-selector-tag': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
     },
     'hljs-deletion': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
     },
     'hljs-subst': {
-      color: '#e06c75',
+      color: atomOneDarkColors.AccentRed,
     },
     'hljs-literal': {
-      color: '#56b6c2',
+      color: atomOneDarkColors.AccentCyan,
     },
     'hljs-string': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
     },
     'hljs-regexp': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
     },
     'hljs-addition': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
     },
     'hljs-attribute': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
     },
     'hljs-meta-string': {
-      color: '#98c379',
+      color: atomOneDarkColors.AccentGreen,
     },
     'hljs-built_in': {
-      color: '#e6c07b',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-class .hljs-title': {
-      color: '#e6c07b',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-attr': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-variable': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-template-variable': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-type': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-selector-class': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-selector-attr': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-selector-pseudo': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-number': {
-      color: '#d19a66',
+      color: atomOneDarkColors.AccentYellow,
     },
     'hljs-symbol': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
     },
     'hljs-bullet': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
     },
     'hljs-link': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
       textDecoration: 'underline',
     },
     'hljs-meta': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
     },
     'hljs-selector-id': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
     },
     'hljs-title': {
-      color: '#61aeee',
+      color: atomOneDarkColors.AccentBlue,
     },
     'hljs-emphasis': {
       fontStyle: 'italic',
@@ -123,5 +139,5 @@ export const AtomOneDark: Theme = new Theme(
       fontWeight: 'bold',
     },
   },
-  darkTheme,
+  atomOneDarkColors,
 );

packages/cli/src/ui/themes/ayu-light.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ayuLightColors: ColorsTheme = {
+  type: 'light',
+  Background: '#f8f9fa',
+  Foreground: '#5c6166',
+  LightBlue: '#55b4d4',
+  AccentBlue: '#399ee6',
+  AccentPurple: '#a37acc',
+  AccentCyan: '#4cbf99',
+  AccentGreen: '#86b300',
+  AccentYellow: '#f2ae49',
+  AccentRed: '#f07171',
+  Comment: '#ABADB1',
+  Gray: '#CCCFD3',
+  GradientColors: lightTheme.GradientColors,
+};
 
 export const AyuLight: Theme = new Theme(
   'Ayu Light',
@@ -14,84 +30,84 @@ export const AyuLight: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: '#f8f9fa',
+      background: ayuLightColors.Background,
-      color: '#5c6166',
+      color: ayuLightColors.Foreground,
     },
     'hljs-comment': {
-      color: '#787b80',
+      color: ayuLightColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
       fontStyle: 'italic',
     },
     'hljs-string': {
-      color: '#86b300',
+      color: ayuLightColors.AccentGreen,
     },
     'hljs-constant': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
     },
     'hljs-number': {
-      color: '#a37acc',
+      color: ayuLightColors.AccentPurple,
     },
     'hljs-keyword': {
-      color: '#fa8d3e',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-selector-tag': {
-      color: '#fa8d3e',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-attribute': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-variable': {
-      color: '#5c6166',
+      color: ayuLightColors.Foreground,
     },
     'hljs-variable.language': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
       fontStyle: 'italic',
     },
     'hljs-title': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
     },
     'hljs-section': {
-      color: '#86b300',
+      color: ayuLightColors.AccentGreen,
       fontWeight: 'bold',
     },
     'hljs-type': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
     },
     'hljs-class .hljs-title': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
     },
     'hljs-tag': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
     },
     'hljs-name': {
-      color: '#399ee6',
+      color: ayuLightColors.AccentBlue,
     },
     'hljs-builtin-name': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-meta': {
-      color: '#e6ba7e',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-symbol': {
-      color: '#f07171',
+      color: ayuLightColors.AccentRed,
     },
     'hljs-bullet': {
-      color: '#f2ae49',
+      color: ayuLightColors.AccentYellow,
     },
     'hljs-regexp': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
     },
     'hljs-link': {
-      color: '#55b4d4',
+      color: ayuLightColors.LightBlue,
     },
     'hljs-deletion': {
-      color: '#ff7383',
+      color: ayuLightColors.AccentRed,
     },
     'hljs-addition': {
-      color: '#6cbf43',
+      color: ayuLightColors.AccentGreen,
     },
     'hljs-emphasis': {
       fontStyle: 'italic',
@@ -100,20 +116,20 @@ export const AyuLight: Theme = new Theme(
       fontWeight: 'bold',
     },
     'hljs-literal': {
-      color: '#4cbf99',
+      color: ayuLightColors.AccentCyan,
     },
     'hljs-built_in': {
-      color: '#f07171',
+      color: ayuLightColors.AccentRed,
     },
     'hljs-doctag': {
-      color: '#d14',
+      color: ayuLightColors.AccentRed,
     },
     'hljs-template-variable': {
-      color: '#008080',
+      color: ayuLightColors.AccentCyan,
     },
     'hljs-selector-id': {
-      color: '#900',
+      color: ayuLightColors.AccentRed,
     },
   },
-  lightTheme,
+  ayuLightColors,
 );

packages/cli/src/ui/themes/ayu.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const ayuDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#0b0e14',
+  Foreground: '#bfbdb6',
+  LightBlue: '#59C2FF',
+  AccentBlue: '#39BAE6',
+  AccentPurple: '#D2A6FF',
+  AccentCyan: '#95E6CB',
+  AccentGreen: '#AAD94C',
+  AccentYellow: '#FFB454',
+  AccentRed: '#F26D78',
+  Comment: '#646A71',
+  Gray: '##3D4149',
+  GradientColors: darkTheme.GradientColors,
+};
 
 export const AyuDark: Theme = new Theme(
   'Ayu',
@@ -14,70 +30,70 @@ export const AyuDark: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: '#0b0e14',
+      background: ayuDarkColors.Background,
-      color: '#bfbdb6',
+      color: ayuDarkColors.Foreground,
     },
     'hljs-keyword': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-literal': {
-      color: '#D2A6FF',
+      color: ayuDarkColors.AccentPurple,
     },
     'hljs-symbol': {
-      color: '#95E6CB',
+      color: ayuDarkColors.AccentCyan,
     },
     'hljs-name': {
-      color: '#59C2FF',
+      color: ayuDarkColors.LightBlue,
     },
     'hljs-link': {
-      color: '#39BAE6',
+      color: ayuDarkColors.AccentBlue,
     },
     'hljs-function .hljs-keyword': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-subst': {
-      color: '#BFBDB6',
+      color: ayuDarkColors.Foreground,
     },
     'hljs-string': {
-      color: '#AAD94C',
+      color: ayuDarkColors.AccentGreen,
     },
     'hljs-title': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-type': {
-      color: '#39BAE6',
+      color: ayuDarkColors.AccentBlue,
     },
     'hljs-attribute': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-bullet': {
-      color: '#FFB454',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-addition': {
-      color: '#7FD962',
+      color: ayuDarkColors.AccentGreen,
     },
     'hljs-variable': {
-      color: '#BFBDB6',
+      color: ayuDarkColors.Foreground,
     },
     'hljs-template-tag': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-template-variable': {
-      color: '#FF8F40',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-comment': {
-      color: '#ACB6BF8C',
+      color: ayuDarkColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#95E6CB',
+      color: ayuDarkColors.AccentCyan,
       fontStyle: 'italic',
     },
     'hljs-deletion': {
-      color: '#F26D78',
+      color: ayuDarkColors.AccentRed,
     },
     'hljs-meta': {
-      color: '#E6B673',
+      color: ayuDarkColors.AccentYellow,
     },
     'hljs-doctag': {
       fontWeight: 'bold',
@@ -89,5 +105,5 @@ export const AyuDark: Theme = new Theme(
       fontStyle: 'italic',
     },
   },
-  darkTheme,
+  ayuDarkColors,
 );

packages/cli/src/ui/themes/default-light.ts

@@ -14,86 +14,86 @@ export const DefaultLight: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: 'white',
+      background: lightTheme.Background,
-      color: 'black',
+      color: lightTheme.Foreground,
     },
     'hljs-comment': {
-      color: '#008000',
+      color: lightTheme.Comment,
     },
     'hljs-quote': {
-      color: '#008000',
+      color: lightTheme.Comment,
     },
     'hljs-variable': {
-      color: '#008000',
+      color: lightTheme.Foreground,
     },
     'hljs-keyword': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
     },
     'hljs-selector-tag': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
     },
     'hljs-built_in': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
     },
     'hljs-name': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
     },
     'hljs-tag': {
-      color: '#00f',
+      color: lightTheme.AccentBlue,
     },
     'hljs-string': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-title': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-section': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-attribute': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-literal': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-template-tag': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-template-variable': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-type': {
-      color: '#a31515',
+      color: lightTheme.AccentRed,
     },
     'hljs-addition': {
-      color: '#a31515',
+      color: lightTheme.AccentGreen,
     },
     'hljs-deletion': {
-      color: '#2b91af',
+      color: lightTheme.AccentRed,
     },
     'hljs-selector-attr': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
     },
     'hljs-selector-pseudo': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
     },
     'hljs-meta': {
-      color: '#2b91af',
+      color: lightTheme.AccentCyan,
     },
     'hljs-doctag': {
-      color: '#808080',
+      color: lightTheme.Gray,
     },
     'hljs-attr': {
-      color: '#f00',
+      color: lightTheme.AccentRed,
     },
     'hljs-symbol': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
     },
     'hljs-bullet': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
     },
     'hljs-link': {
-      color: '#00b0e8',
+      color: lightTheme.AccentCyan,
     },
     'hljs-emphasis': {
       fontStyle: 'italic',

packages/cli/src/ui/themes/default.ts

@@ -14,101 +14,101 @@ export const DefaultDark: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: '#1E1E1E',
+      background: darkTheme.Background,
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-keyword': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
     },
     'hljs-literal': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
     },
     'hljs-symbol': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
     },
     'hljs-name': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
     },
     'hljs-link': {
-      color: '#569CD6',
+      color: darkTheme.AccentBlue,
       textDecoration: 'underline',
     },
     'hljs-built_in': {
-      color: '#4EC9B0',
+      color: darkTheme.AccentCyan,
     },
     'hljs-type': {
-      color: '#4EC9B0',
+      color: darkTheme.AccentCyan,
     },
     'hljs-number': {
-      color: '#B8D7A3',
+      color: darkTheme.AccentGreen,
     },
     'hljs-class': {
-      color: '#B8D7A3',
+      color: darkTheme.AccentGreen,
     },
     'hljs-string': {
-      color: '#D69D85',
+      color: darkTheme.AccentYellow,
     },
     'hljs-meta-string': {
-      color: '#D69D85',
+      color: darkTheme.AccentYellow,
     },
     'hljs-regexp': {
-      color: '#9A5334',
+      color: darkTheme.AccentRed,
     },
     'hljs-template-tag': {
-      color: '#9A5334',
+      color: darkTheme.AccentRed,
     },
     'hljs-subst': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-function': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-title': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-params': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-formula': {
-      color: '#DCDCDC',
+      color: darkTheme.Foreground,
     },
     'hljs-comment': {
-      color: '#57A64A',
+      color: darkTheme.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#57A64A',
+      color: darkTheme.Comment,
       fontStyle: 'italic',
     },
     'hljs-doctag': {
-      color: '#608B4E',
+      color: darkTheme.Comment,
     },
     'hljs-meta': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
     },
     'hljs-meta-keyword': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
     },
     'hljs-tag': {
-      color: '#9B9B9B',
+      color: darkTheme.Gray,
     },
     'hljs-variable': {
-      color: '#BD63C5',
+      color: darkTheme.AccentPurple,
     },
     'hljs-template-variable': {
-      color: '#BD63C5',
+      color: darkTheme.AccentPurple,
     },
     'hljs-attr': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
     },
     'hljs-attribute': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
     },
     'hljs-builtin-name': {
-      color: '#9CDCFE',
+      color: darkTheme.LightBlue,
     },
     'hljs-section': {
-      color: 'gold',
+      color: darkTheme.AccentYellow,
     },
     'hljs-emphasis': {
       fontStyle: 'italic',
@@ -117,22 +117,22 @@ export const DefaultDark: Theme = new Theme(
       fontWeight: 'bold',
     },
     'hljs-bullet': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-selector-tag': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-selector-id': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-selector-class': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-selector-attr': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-selector-pseudo': {
-      color: '#D7BA7D',
+      color: darkTheme.AccentYellow,
     },
     'hljs-addition': {
       backgroundColor: '#144212',

packages/cli/src/ui/themes/dracula.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const draculaColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#282a36',
+  Foreground: '#f8f8f2',
+  LightBlue: '#8be9fd',
+  AccentBlue: '#8be9fd',
+  AccentPurple: '#ff79c6',
+  AccentCyan: '#8be9fd',
+  AccentGreen: '#50fa7b',
+  AccentYellow: '#f1fa8c',
+  AccentRed: '#ff5555',
+  Comment: '#6272a4',
+  Gray: '#6272a4',
+  GradientColors: darkTheme.GradientColors,
+};
 
 export const Dracula: Theme = new Theme(
   'Dracula',
@@ -14,81 +30,81 @@ export const Dracula: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: '#282a36',
+      background: draculaColors.Background,
-      color: '#f8f8f2',
+      color: draculaColors.Foreground,
     },
     'hljs-keyword': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-selector-tag': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-literal': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-section': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-link': {
-      color: '#8be9fd',
+      color: draculaColors.AccentBlue,
     },
     'hljs-function .hljs-keyword': {
-      color: '#ff79c6',
+      color: draculaColors.AccentPurple,
     },
     'hljs-subst': {
-      color: '#f8f8f2',
+      color: draculaColors.Foreground,
     },
     'hljs-string': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-title': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
       fontWeight: 'bold',
     },
     'hljs-name': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
       fontWeight: 'bold',
     },
     'hljs-type': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
       fontWeight: 'bold',
     },
     'hljs-attribute': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-symbol': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-bullet': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-addition': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentGreen,
     },
     'hljs-variable': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-template-tag': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-template-variable': {
-      color: '#f1fa8c',
+      color: draculaColors.AccentYellow,
     },
     'hljs-comment': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
     },
     'hljs-quote': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
     },
     'hljs-deletion': {
-      color: '#6272a4',
+      color: draculaColors.AccentRed,
     },
     'hljs-meta': {
-      color: '#6272a4',
+      color: draculaColors.Comment,
     },
     'hljs-doctag': {
       fontWeight: 'bold',
@@ -100,5 +116,5 @@ export const Dracula: Theme = new Theme(
       fontStyle: 'italic',
     },
   },
-  darkTheme,
+  draculaColors,
 );

packages/cli/src/ui/themes/github-dark.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { darkTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const githubDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#24292e',
+  Foreground: '#d1d5da',
+  LightBlue: '#79B8FF',
+  AccentBlue: '#79B8FF',
+  AccentPurple: '#B392F0',
+  AccentCyan: '#9ECBFF',
+  AccentGreen: '#85E89D',
+  AccentYellow: '#FFAB70',
+  AccentRed: '#F97583',
+  Comment: '#6A737D',
+  Gray: '#6A737D',
+  GradientColors: darkTheme.GradientColors,
+};
 
 export const GitHubDark: Theme = new Theme(
   'GitHub',
@@ -14,107 +30,107 @@ export const GitHubDark: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      color: '#d1d5da',
+      color: githubDarkColors.Foreground,
-      background: '#24292e',
+      background: githubDarkColors.Background,
     },
     'hljs-comment': {
-      color: '#6A737D',
+      color: githubDarkColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#6A737D',
+      color: githubDarkColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-keyword': {
-      color: '#F97583',
+      color: githubDarkColors.AccentRed,
       fontWeight: 'bold',
     },
     'hljs-selector-tag': {
-      color: '#F97583',
+      color: githubDarkColors.AccentRed,
       fontWeight: 'bold',
     },
     'hljs-subst': {
-      color: '#e1e4e8',
+      color: githubDarkColors.Foreground,
     },
     'hljs-number': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
     },
     'hljs-literal': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
     },
     'hljs-variable': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
     },
     'hljs-template-variable': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
     },
     'hljs-tag .hljs-attr': {
-      color: '#FFAB70',
+      color: githubDarkColors.AccentYellow,
     },
     'hljs-string': {
-      color: '#9ECBFF',
+      color: githubDarkColors.AccentCyan,
     },
     'hljs-doctag': {
-      color: '#9ECBFF',
+      color: githubDarkColors.AccentCyan,
     },
     'hljs-title': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-section': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-selector-id': {
-      color: '#B392F0',
+      color: githubDarkColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-type': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
       fontWeight: 'bold',
     },
     'hljs-class .hljs-title': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
       fontWeight: 'bold',
     },
     'hljs-tag': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
     },
     'hljs-name': {
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
     },
     'hljs-attribute': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
     },
     'hljs-regexp': {
-      color: '#DBEDFF',
+      color: githubDarkColors.AccentCyan,
     },
     'hljs-link': {
-      color: '#DBEDFF',
+      color: githubDarkColors.AccentCyan,
     },
     'hljs-symbol': {
-      color: '#990073',
+      color: githubDarkColors.AccentPurple,
     },
     'hljs-bullet': {
-      color: '#990073',
+      color: githubDarkColors.AccentPurple,
     },
     'hljs-built_in': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
     },
     'hljs-builtin-name': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
     },
     'hljs-meta': {
-      color: '#79B8FF',
+      color: githubDarkColors.LightBlue,
       fontWeight: 'bold',
     },
     'hljs-deletion': {
       background: '#86181D',
-      color: '#FDAEB7',
+      color: githubDarkColors.AccentRed,
     },
     'hljs-addition': {
       background: '#144620',
-      color: '#85E89D',
+      color: githubDarkColors.AccentGreen,
     },
     'hljs-emphasis': {
       fontStyle: 'italic',
@@ -123,5 +139,5 @@ export const GitHubDark: Theme = new Theme(
       fontWeight: 'bold',
     },
   },
-  darkTheme,
+  githubDarkColors,
 );

packages/cli/src/ui/themes/github-light.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const githubLightColors: ColorsTheme = {
+  type: 'light',
+  Background: '#f8f8f8',
+  Foreground: '#24292E',
+  LightBlue: '#0086b3',
+  AccentBlue: '#458',
+  AccentPurple: '#900',
+  AccentCyan: '#009926',
+  AccentGreen: '#008080',
+  AccentYellow: '#990073',
+  AccentRed: '#d14',
+  Comment: '#998',
+  Gray: '#999',
+  GradientColors: lightTheme.GradientColors,
+};
 
 export const GitHubLight: Theme = new Theme(
   'GitHub Light',
@@ -14,102 +30,102 @@ export const GitHubLight: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      color: '#24292E',
+      color: githubLightColors.Foreground,
-      background: '#f8f8f8',
+      background: githubLightColors.Background,
     },
     'hljs-comment': {
-      color: '#998',
+      color: githubLightColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-quote': {
-      color: '#998',
+      color: githubLightColors.Comment,
       fontStyle: 'italic',
     },
     'hljs-keyword': {
-      color: '#333',
+      color: githubLightColors.Foreground,
       fontWeight: 'bold',
     },
     'hljs-selector-tag': {
-      color: '#333',
+      color: githubLightColors.Foreground,
       fontWeight: 'bold',
     },
     'hljs-subst': {
-      color: '#333',
+      color: githubLightColors.Foreground,
       fontWeight: 'normal',
     },
     'hljs-number': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
     },
     'hljs-literal': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
     },
     'hljs-variable': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
     },
     'hljs-template-variable': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
     },
     'hljs-tag .hljs-attr': {
-      color: '#008080',
+      color: githubLightColors.AccentGreen,
     },
     'hljs-string': {
-      color: '#d14',
+      color: githubLightColors.AccentRed,
     },
     'hljs-doctag': {
-      color: '#d14',
+      color: githubLightColors.AccentRed,
     },
     'hljs-title': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-section': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-selector-id': {
-      color: '#900',
+      color: githubLightColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-type': {
-      color: '#458',
+      color: githubLightColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-class .hljs-title': {
-      color: '#458',
+      color: githubLightColors.AccentBlue,
       fontWeight: 'bold',
     },
     'hljs-tag': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
       fontWeight: 'normal',
     },
     'hljs-name': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
       fontWeight: 'normal',
     },
     'hljs-attribute': {
-      color: '#000080',
+      color: githubLightColors.AccentBlue,
       fontWeight: 'normal',
     },
     'hljs-regexp': {
-      color: '#009926',
+      color: githubLightColors.AccentCyan,
     },
     'hljs-link': {
-      color: '#009926',
+      color: githubLightColors.AccentCyan,
     },
     'hljs-symbol': {
-      color: '#990073',
+      color: githubLightColors.AccentYellow,
     },
     'hljs-bullet': {
-      color: '#990073',
+      color: githubLightColors.AccentYellow,
     },
     'hljs-built_in': {
-      color: '#0086b3',
+      color: githubLightColors.LightBlue,
     },
     'hljs-builtin-name': {
-      color: '#0086b3',
+      color: githubLightColors.LightBlue,
     },
     'hljs-meta': {
-      color: '#999',
+      color: githubLightColors.Gray,
       fontWeight: 'bold',
     },
     'hljs-deletion': {
@@ -125,5 +141,5 @@ export const GitHubLight: Theme = new Theme(
       fontWeight: 'bold',
     },
   },
-  lightTheme,
+  githubLightColors,
 );

packages/cli/src/ui/themes/googlecode.ts

@@ -4,7 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { lightTheme, Theme } from './theme.js';
+import { lightTheme, Theme, type ColorsTheme } from './theme.js';
+
+const googleCodeColors: ColorsTheme = {
+  type: 'light',
+  Background: 'white',
+  Foreground: 'black',
+  LightBlue: '#066',
+  AccentBlue: '#008',
+  AccentPurple: '#606',
+  AccentCyan: '#066',
+  AccentGreen: '#080',
+  AccentYellow: '#660',
+  AccentRed: '#800',
+  Comment: '#5f6368',
+  Gray: lightTheme.Gray,
+  GradientColors: lightTheme.GradientColors,
+};
 
 export const GoogleCode: Theme = new Theme(
   'Google Code',
@@ -14,100 +30,100 @@ export const GoogleCode: Theme = new Theme(
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: 'white',
+      background: googleCodeColors.Background,
-      color: 'black',
+      color: googleCodeColors.Foreground,
     },
     'hljs-comment': {
-      color: '#800',
+      color: googleCodeColors.AccentRed,
     },
     'hljs-quote': {
-      color: '#800',
+      color: googleCodeColors.AccentRed,
     },
     'hljs-keyword': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
     },
     'hljs-selector-tag': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
     },
     'hljs-section': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
     },
     'hljs-title': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-name': {
-      color: '#008',
+      color: googleCodeColors.AccentBlue,
     },
     'hljs-variable': {
-      color: '#660',
+      color: googleCodeColors.AccentYellow,
     },
     'hljs-template-variable': {
-      color: '#660',
+      color: googleCodeColors.AccentYellow,
     },
     'hljs-string': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
     },
     'hljs-selector-attr': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
     },
     'hljs-selector-pseudo': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
     },
     'hljs-regexp': {
-      color: '#080',
+      color: googleCodeColors.AccentGreen,
     },
     'hljs-literal': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-symbol': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-bullet': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-meta': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-number': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-link': {
-      color: '#066',
+      color: googleCodeColors.AccentCyan,
     },
     'hljs-doctag': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
       fontWeight: 'bold',
     },
     'hljs-type': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-attr': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-built_in': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-builtin-name': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-params': {
-      color: '#606',
+      color: googleCodeColors.AccentPurple,
     },
     'hljs-attribute': {
-      color: '#000',
+      color: googleCodeColors.Foreground,
     },
     'hljs-subst': {
-      color: '#000',
+      color: googleCodeColors.Foreground,
     },
     'hljs-formula': {
       backgroundColor: '#eee',
       fontStyle: 'italic',
     },
     'hljs-selector-id': {
-      color: '#9B703F',
+      color: googleCodeColors.AccentYellow,
     },
     'hljs-selector-class': {
-      color: '#9B703F',
+      color: googleCodeColors.AccentYellow,
     },
     'hljs-addition': {
       backgroundColor: '#baeeba',
@@ -122,5 +138,5 @@ export const GoogleCode: Theme = new Theme(
       fontStyle: 'italic',
     },
   },
-  lightTheme,
+  googleCodeColors,
 );

packages/cli/src/ui/themes/theme.ts

@@ -19,7 +19,7 @@ export interface ColorsTheme {
   AccentGreen: string;
   AccentYellow: string;
   AccentRed: string;
-  SubtleComment: string;
+  Comment: string;
   Gray: string;
   GradientColors?: string[];
 }
@@ -35,8 +35,8 @@ export const lightTheme: ColorsTheme = {
   AccentGreen: '#3CA84B',
   AccentYellow: '#D5A40A',
   AccentRed: '#DD4C4C',
-  SubtleComment: '#9CA3AF',
+  Comment: '#008000',
-  Gray: 'gray',
+  Gray: '#B7BECC',
   GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };
 
@@ -51,8 +51,8 @@ export const darkTheme: ColorsTheme = {
   AccentGreen: '#A6E3A1',
   AccentYellow: '#F9E2AF',
   AccentRed: '#F38BA8',
-  SubtleComment: '#6C7086',
+  Comment: '#6C7086',
-  Gray: 'gray',
+  Gray: '#6C7086',
   GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };
 
@@ -67,7 +67,7 @@ export const ansiTheme: ColorsTheme = {
   AccentGreen: 'green',
   AccentYellow: 'yellow',
   AccentRed: 'red',
-  SubtleComment: 'gray',
+  Comment: 'gray',
   Gray: 'gray',
 };
 

packages/cli/src/ui/themes/xcode.ts

@@ -4,105 +4,121 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { lightTheme, Theme } from './theme.js';
+import { darkTheme, Theme, type ColorsTheme } from './theme.js';
+
+const xcodeColors: ColorsTheme = {
+  type: 'light',
+  Background: '#fff',
+  Foreground: 'black',
+  LightBlue: '#0E0EFF',
+  AccentBlue: '#1c00cf',
+  AccentPurple: '#aa0d91',
+  AccentCyan: '#3F6E74',
+  AccentGreen: '#007400',
+  AccentYellow: '#836C28',
+  AccentRed: '#c41a16',
+  Comment: '#007400',
+  Gray: '#c0c0c0',
+  GradientColors: darkTheme.GradientColors,
+};
 
 export const XCode: Theme = new Theme(
-  'XCode',
+  'Xcode',
   'light',
   {
     hljs: {
       display: 'block',
       overflowX: 'auto',
       padding: '0.5em',
-      background: '#fff',
+      background: xcodeColors.Background,
-      color: 'black',
+      color: xcodeColors.Foreground,
     },
     'xml .hljs-meta': {
-      color: '#c0c0c0',
+      color: xcodeColors.Gray,
     },
     'hljs-comment': {
-      color: '#007400',
+      color: xcodeColors.Comment,
     },
     'hljs-quote': {
-      color: '#007400',
+      color: xcodeColors.Comment,
     },
     'hljs-tag': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-attribute': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-keyword': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-selector-tag': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-literal': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-name': {
-      color: '#aa0d91',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-variable': {
-      color: '#3F6E74',
+      color: xcodeColors.AccentCyan,
     },
     'hljs-template-variable': {
-      color: '#3F6E74',
+      color: xcodeColors.AccentCyan,
     },
     'hljs-code': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
     },
     'hljs-string': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
     },
     'hljs-meta-string': {
-      color: '#c41a16',
+      color: xcodeColors.AccentRed,
     },
     'hljs-regexp': {
-      color: '#0E0EFF',
+      color: xcodeColors.LightBlue,
     },
     'hljs-link': {
-      color: '#0E0EFF',
+      color: xcodeColors.LightBlue,
     },
     'hljs-title': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
     },
     'hljs-symbol': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
     },
     'hljs-bullet': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
     },
     'hljs-number': {
-      color: '#1c00cf',
+      color: xcodeColors.AccentBlue,
     },
     'hljs-section': {
-      color: '#643820',
+      color: xcodeColors.AccentYellow,
     },
     'hljs-meta': {
-      color: '#643820',
+      color: xcodeColors.AccentYellow,
     },
     'hljs-class .hljs-title': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-type': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-built_in': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-builtin-name': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-params': {
-      color: '#5c2699',
+      color: xcodeColors.AccentPurple,
     },
     'hljs-attr': {
-      color: '#836C28',
+      color: xcodeColors.AccentYellow,
     },
     'hljs-subst': {
-      color: '#000',
+      color: xcodeColors.Foreground,
     },
     'hljs-formula': {
       backgroundColor: '#eee',
@@ -115,10 +131,10 @@ export const XCode: Theme = new Theme(
       backgroundColor: '#ffc8bd',
     },
     'hljs-selector-id': {
-      color: '#9b703f',
+      color: xcodeColors.AccentYellow,
     },
     'hljs-selector-class': {
-      color: '#9b703f',
+      color: xcodeColors.AccentYellow,
     },
     'hljs-doctag': {
       fontWeight: 'bold',
@@ -130,5 +146,5 @@ export const XCode: Theme = new Theme(
       fontStyle: 'italic',
     },
   },
-  lightTheme,
+  xcodeColors,
 );

packages/cli/src/ui/utils/CodeColorizer.tsx

@@ -107,7 +107,7 @@ export function colorizeCode(
       <Text>
         {lines.map((line, index) => (
           <Text key={index}>
-            <Text color={activeTheme.colors.SubtleComment}>
+            <Text color={activeTheme.colors.Gray}>
               {`${String(index + 1).padStart(padWidth, ' ')} `}
             </Text>
             <Text color={activeTheme.defaultColor}>
@@ -138,7 +138,7 @@ export function colorizeCode(
             <Text color={activeTheme.defaultColor}>
               {`${String(index + 1).padStart(padWidth, ' ')} `}
             </Text>
-            <Text color={activeTheme.colors.SubtleComment}>{line}</Text>
+            <Text color={activeTheme.colors.Gray}>{line}</Text>
             {index < lines.length - 1 && '\n'}
           </Text>
         ))}

packages/cli/src/ui/utils/MarkdownDisplay.tsx

@@ -121,7 +121,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
           break;
         case 4:
           headerNode = (
-            <Text italic color={Colors.SubtleComment}>
+            <Text italic color={Colors.Gray}>
               <RenderInline text={headerText} />
             </Text>
           );
@@ -358,9 +358,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
         // Not enough space to even show the message meaningfully
         return (
           <Box padding={CODE_BLOCK_PADDING}>
-            <Text color={Colors.SubtleComment}>
+            <Text color={Colors.Gray}>... code is being written ...</Text>
-              ... code is being written ...
-            </Text>
           </Box>
         );
       }
@@ -372,7 +370,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
       return (
         <Box flexDirection="column" padding={CODE_BLOCK_PADDING}>
           {colorizedTruncatedCode}
-          <Text color={Colors.SubtleComment}>... generating more ...</Text>
+          <Text color={Colors.Gray}>... generating more ...</Text>
         </Box>
       );
     }