Allow themes to theme the UI (#769)

2025-06-05 14:35:47 -07:00 · 2025-06-05 14:35:47 -07:00 · 8a0a2523ca
parent 2285bba66e
commit 8a0a2523ca
33 changed files with 533 additions and 385 deletions
--- a/packages/cli/src/ui/colors.ts
+++ b/packages/cli/src/ui/colors.ts
@ -38,8 +38,8 @@ export const Colors: ColorsTheme = {
  get AccentRed() {
    return themeManager.getActiveTheme().colors.AccentRed;
  },
-  get SubtleComment() {
-    return themeManager.getActiveTheme().colors.SubtleComment;
+  get Comment() {
+    return themeManager.getActiveTheme().colors.Comment;
  },
  get Gray() {
    return themeManager.getActiveTheme().colors.Gray;
--- a/packages/cli/src/ui/components/AboutBox.tsx
+++ b/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}
--- a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx
+++ b/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>
  );
--- a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
+++ b/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>
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
+++ b/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>;
 };
--- a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
+++ b/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{' '}
-          <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>
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/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 && (
-          <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>
      )}
--- a/packages/cli/src/ui/components/Help.tsx
+++ b/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}>
        {' '}
        !{' '}
--- a/packages/cli/src/ui/components/InputPrompt.tsx
+++ b/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;
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/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)`}
--- a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx
+++ b/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>(
-    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>
  );
--- a/packages/cli/src/ui/components/ShellModeIndicator.tsx
+++ b/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>
 );
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/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}>
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/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
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ 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>
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/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;

--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/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>
  );
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/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}>
-            {itemWithThemeProps.themeTypeDisplay}
-          </Text>
+          <Text color={Colors.Gray}>{itemWithThemeProps.themeTypeDisplay}</Text>
        </Text>
      );
    }
--- a/packages/cli/src/ui/themes/ansi-light.ts
+++ b/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,
 );
--- a/packages/cli/src/ui/themes/ansi.ts
+++ b/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,
 );
--- a/packages/cli/src/ui/themes/atom-one-dark.ts
+++ b/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',
-      background: '#282c34',
+      color: atomOneDarkColors.Foreground,
+      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,
 );
--- a/packages/cli/src/ui/themes/ayu-light.ts
+++ b/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',
-      color: '#5c6166',
+      background: ayuLightColors.Background,
+      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,
 );
--- a/packages/cli/src/ui/themes/ayu.ts
+++ b/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',
-      color: '#bfbdb6',
+      background: ayuDarkColors.Background,
+      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,
 );
--- a/packages/cli/src/ui/themes/default-light.ts
+++ b/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',
-      color: 'black',
+      background: lightTheme.Background,
+      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',
--- a/packages/cli/src/ui/themes/default.ts
+++ b/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',
-      color: '#DCDCDC',
+      background: darkTheme.Background,
+      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',
--- a/packages/cli/src/ui/themes/dracula.ts
+++ b/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',
-      color: '#f8f8f2',
+      background: draculaColors.Background,
+      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,
 );
--- a/packages/cli/src/ui/themes/github-dark.ts
+++ b/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',
-      background: '#24292e',
+      color: githubDarkColors.Foreground,
+      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,
 );
--- a/packages/cli/src/ui/themes/github-light.ts
+++ b/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',
-      background: '#f8f8f8',
+      color: githubLightColors.Foreground,
+      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,
 );
--- a/packages/cli/src/ui/themes/googlecode.ts
+++ b/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',
-      color: 'black',
+      background: googleCodeColors.Background,
+      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,
 );
--- a/packages/cli/src/ui/themes/theme.ts
+++ b/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',
-  Gray: 'gray',
+  Comment: '#008000',
+  Gray: '#B7BECC',
  GradientColors: ['#4796E4', '#847ACE', '#C3677F'],
 };

@ -51,8 +51,8 @@ export const darkTheme: ColorsTheme = {
  AccentGreen: '#A6E3A1',
  AccentYellow: '#F9E2AF',
  AccentRed: '#F38BA8',
-  SubtleComment: '#6C7086',
-  Gray: 'gray',
+  Comment: '#6C7086',
+  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',
 };

--- a/packages/cli/src/ui/themes/xcode.ts
+++ b/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',
-      color: 'black',
+      background: xcodeColors.Background,
+      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,
 );
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/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>
        ))}
--- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx
+++ b/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}>
-              ... code is being written ...
-            </Text>
+            <Text color={Colors.Gray}>... 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>
      );
    }