Fixing theme regression bug

Author: igorcosta

docs/config-reference.md

@@ -343,7 +343,7 @@ See [Workspace Safety](./workspace-safety.md) for full details.
 
 | Field                        | Type   | Default | Description                                                                                    |
 | ---------------------------- | ------ | ------- | ---------------------------------------------------------------------------------------------- |
-| `theme`                      | string | `"dark"` | Color theme for terminal output. Built-ins include `dark`, `light`, `dracula`, `sandy`, `tui`, `github-dark`, `turkey`, `brazil`, and `australia`. |
+| `theme`                      | string | `"dark"` | Color theme for terminal output. Built-ins include `dark`, `light`, `dracula`, `sandy`, `tui`, `github-dark`, `cappadocia`, `rio`, and `australia`. Legacy `turkey` and `brazil` values still load as aliases. |
 | `customThemes`               | object | `{}`    | Inline custom theme definitions keyed by theme name. Set `theme` to the same key to use one.   |
 | `autoConfirm`                | boolean | `false` | Skip confirmation prompts for safe operations                                                  |
 | `readFileCharLimit`          | number | `300`   | Max characters to display from read/find tool output (full content is still sent to the model) |

src/commands/about.ts

@@ -4,10 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { execSync } from 'node:child_process';
-import chalk from 'chalk';
 import terminalLink from 'terminal-link';
 import { t } from '../i18n/index.js';
-import { getTheme, isThemeInitialized } from '../ui/theme/Theme.js';
+import { createCommandTheme } from './commandTheme.js';
 import { ASCII_FRIEND } from '../utils/asciiArt.js';
 import packageJson from '../../package.json' with { type: 'json' };
 
@@ -49,53 +48,37 @@ function getVersionString(): string {
  * About command - shows information about Autohand
  */
 export async function about(): Promise<string | null> {
-  // Use theme if initialized, otherwise use fallback chalk colors
-  let accent: (text: string) => string;
-  let muted: (text: string) => string;
-  let text: (text: string) => string;
-
-  if (isThemeInitialized()) {
-    const theme = getTheme();
-    accent = (text: string) => chalk.hex(theme.colors.accent)(text);
-    muted = (text: string) => chalk.hex(theme.colors.muted)(text);
-    text = (str: string) => chalk.hex(theme.colors.text)(str);
-  } else {
-    // Fallback colors when theme not initialized
-    accent = (text: string) => chalk.cyan(text);
-    muted = (text: string) => chalk.gray(text);
-    text = (text: string) => chalk.white(text);
-  }
+  const theme = createCommandTheme();
 
   const lines: string[] = [
-    chalk.gray(ASCII_FRIEND),
+    theme.muted(ASCII_FRIEND),
     '',
-    accent(`${t('commands.about.title')} v${getVersionString()}`),
-    muted(t('commands.about.subtitle')),
+    theme.accent(`${t('commands.about.title')} v${getVersionString()}`),
+    theme.muted(t('commands.about.subtitle')),
     '',
   ];
 
-  // Links section - make them underlined and cyan to look clickable
   const websiteUrl = 'https://autohand.ai';
   const githubUrl = 'https://github.com/autohandai/';
   const docsUrl = 'https://docs.autohand.ai';
 
-  const websiteLink = terminalLink(chalk.cyan.underline('autohand.ai'), websiteUrl);
-  const githubLink = terminalLink(chalk.cyan.underline('github.com/autohandai/'), githubUrl);
-  const docsLink = terminalLink(chalk.cyan.underline('docs.autohand.ai'), docsUrl);
+  const websiteLink = terminalLink(theme.link('autohand.ai'), websiteUrl);
+  const githubLink = terminalLink(theme.link('github.com/autohandai/'), githubUrl);
+  const docsLink = terminalLink(theme.link('docs.autohand.ai'), docsUrl);
 
-  lines.push(`${text('🌐')} ${text(t('commands.about.website') + ':')}    ${websiteLink}`);
-  lines.push(`${text('📦')} ${text(t('commands.about.github') + ':')}     ${githubLink}`);
-  lines.push(`${text('📚')} ${text(t('commands.about.docs') + ':')}       ${docsLink}`);
+  lines.push(`${theme.text('🌐')} ${theme.text(t('commands.about.website') + ':')}    ${websiteLink}`);
+  lines.push(`${theme.text('📦')} ${theme.text(t('commands.about.github') + ':')}     ${githubLink}`);
+  lines.push(`${theme.text('📚')} ${theme.text(t('commands.about.docs') + ':')}       ${docsLink}`);
   lines.push('');
 
   // Contribution section
-  lines.push(text(`💡 ${t('commands.about.contribute')}`));
-  lines.push(text(`   • ${t('commands.about.feedback')}:     ${accent('/feedback')}`));
-  lines.push(text(`   • ${t('commands.about.submitPR')}:         ${accent('gh pr create')}`));
+  lines.push(theme.text(`💡 ${t('commands.about.contribute')}`));
+  lines.push(theme.text(`   • ${t('commands.about.feedback')}:     ${theme.accent('/feedback')}`));
+  lines.push(theme.text(`   • ${t('commands.about.submitPR')}:         ${theme.accent('gh pr create')}`));
 
   const issuesUrl = 'https://github.com/autohandai/code-cli/issues';
-  const issuesLink = terminalLink(chalk.cyan.underline('github.com/autohandai/code-cli/issues'), issuesUrl);
-  lines.push(text(`   • ${t('commands.about.reportIssues')}:     ${issuesLink}`));
+  const issuesLink = terminalLink(theme.link('github.com/autohandai/code-cli/issues'), issuesUrl);
+  lines.push(theme.text(`   • ${t('commands.about.reportIssues')}:     ${issuesLink}`));
 
   return lines.join('\n');
 }

src/commands/commandTheme.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2026 Autohand AI LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import chalk from 'chalk';
+import { getTheme, isThemeInitialized } from '../ui/theme/Theme.js';
+import type { ColorToken } from '../ui/theme/types.js';
+
+type Styler = (text: string) => string;
+
+export interface CommandTheme {
+  accent: Styler;
+  muted: Styler;
+  text: Styler;
+  success: Styler;
+  warning: Styler;
+  error: Styler;
+  bold: Styler;
+  heading: Styler;
+  link: Styler;
+  tab: Styler;
+  selectedTab: Styler;
+  progressFilled: Styler;
+  progressEmpty: Styler;
+}
+
+export function createCommandTheme(): CommandTheme {
+  const theme = isThemeInitialized() ? getTheme() : null;
+
+  const fg = (token: ColorToken, fallback: Styler): Styler => {
+    return (value: string) => theme ? theme.fg(token, value) : fallback(value);
+  };
+
+  const accent = fg('accent', chalk.cyan);
+  const muted = fg('muted', chalk.gray);
+  const text = fg('text', chalk.white);
+  const success = fg('success', chalk.green);
+  const warning = fg('warning', chalk.yellow);
+  const error = fg('error', chalk.red);
+  const bold: Styler = (value) => theme ? theme.bold(value) : chalk.bold(value);
+
+  return {
+    accent,
+    muted,
+    text,
+    success,
+    warning,
+    error,
+    bold,
+    heading: (value) => bold(accent(value)),
+    link: (value) => theme ? theme.underline(accent(value)) : chalk.cyan.underline(value),
+    tab: (value) => muted(` ${value} `),
+    selectedTab: (value) => theme
+      ? theme.fgBg('userMessageText', 'accent', ` ${value} `)
+      : chalk.bgWhite.black(` ${value} `),
+    progressFilled: accent,
+    progressEmpty: muted,
+  };
+}

src/commands/status.ts

@@ -3,12 +3,12 @@
  * Copyright 2025 Autohand AI LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import chalk from 'chalk';
 import readline from 'node:readline';
 import { t } from '../i18n/index.js';
 import type { SlashCommandContext } from '../core/slashCommandTypes.js';
 import type { AutohandConfig } from '../types.js';
 import { cleanupModalRender, prepareModalRender } from '../ui/ink/components/Modal.js';
+import { createCommandTheme } from './commandTheme.js';
 import packageJson from '../../package.json' with { type: 'json' };
 
 export const metadata = {
@@ -104,12 +104,13 @@ function renderStatusUI(data: StatusData): Promise<void> {
         }
 
         const render = () => {
+            const theme = createCommandTheme();
             // Clear screen and move cursor to top
             process.stdout.write('\x1B[2J\x1B[H');
 
             renderTabHeader(tabs, currentTab);
             renderTabContent(tabs[currentTab], data);
-            console.log(chalk.gray('\nEsc to exit'));
+            console.log(theme.muted('\nEsc to exit'));
         };
 
         let buffer = '';
@@ -205,13 +206,14 @@ function renderStatusUI(data: StatusData): Promise<void> {
 }
 
 function renderTabHeader(tabs: TabName[], currentIndex: number): void {
+    const theme = createCommandTheme();
     const header = tabs.map((tab, i) => {
         return i === currentIndex
-            ? chalk.bgWhite.black(` ${tab} `)
-            : chalk.gray(` ${tab} `);
+            ? theme.selectedTab(tab)
+            : theme.tab(tab);
     }).join('  ');
 
-    console.log(`Settings: ${header}  ${chalk.gray('(tab to cycle)')}\n`);
+    console.log(`Settings: ${header}  ${theme.muted('(tab to cycle)')}\n`);
 }
 
 function renderTabContent(tab: TabName, data: StatusData): void {
@@ -229,28 +231,30 @@ function renderTabContent(tab: TabName, data: StatusData): void {
 }
 
 function renderStatusTab(data: StatusData): void {
-    console.log(chalk.bold(`${t('commands.status.version')}:`), data.version);
-    console.log(chalk.bold(`${t('commands.status.sessionId')}:`), data.sessionId ?? chalk.gray('none'));
-    console.log(chalk.bold(`${t('commands.status.cwd')}:`), data.cwd);
-    console.log(chalk.bold(`${t('commands.status.provider')}:`), data.provider);
-    console.log(chalk.bold(`${t('commands.status.model')}:`), data.model);
+    const theme = createCommandTheme();
+    console.log(theme.bold(`${t('commands.status.version')}:`), data.version);
+    console.log(theme.bold(`${t('commands.status.sessionId')}:`), data.sessionId ?? theme.muted('none'));
+    console.log(theme.bold(`${t('commands.status.cwd')}:`), data.cwd);
+    console.log(theme.bold(`${t('commands.status.provider')}:`), data.provider);
+    console.log(theme.bold(`${t('commands.status.model')}:`), data.model);
     console.log(
-        chalk.bold('Context Compaction:'),
-        data.contextCompactionEnabled ? chalk.green('ON') : chalk.yellow('OFF')
+        theme.bold('Context Compaction:'),
+        data.contextCompactionEnabled ? theme.success('ON') : theme.warning('OFF')
     );
     console.log();
     console.log(
-        chalk.bold(`${t('commands.status.apiStatus')}:`),
-        data.apiConnected ? chalk.green(t('commands.status.connected')) : chalk.red(t('commands.status.disconnected'))
+        theme.bold(`${t('commands.status.apiStatus')}:`),
+        data.apiConnected ? theme.success(t('commands.status.connected')) : theme.error(t('commands.status.disconnected'))
     );
-    console.log(chalk.bold(`${t('commands.status.sessions')}:`), t('commands.status.total', { count: String(data.sessionsCount) }));
-    console.log(chalk.bold('Memory:'), 'user (~/.autohand/memory/), project (.autohand/memory/)');
+    console.log(theme.bold(`${t('commands.status.sessions')}:`), t('commands.status.total', { count: String(data.sessionsCount) }));
+    console.log(theme.bold('Memory:'), 'user (~/.autohand/memory/), project (.autohand/memory/)');
 }
 
 function renderConfigTab(data: StatusData): void {
+    const theme = createCommandTheme();
     const config = data.config;
 
-    console.log(chalk.bold('Autohand preferences\n'));
+    console.log(theme.bold('Autohand preferences\n'));
 
     const settings: Array<[string, string]> = [
         ['Theme', config?.ui?.theme ?? 'dark'],
@@ -264,26 +268,28 @@ function renderConfigTab(data: StatusData): void {
     ];
 
     for (const [name, value] of settings) {
-        console.log(`  ${chalk.cyan(name.padEnd(30))} ${value}`);
+        console.log(`  ${theme.accent(name.padEnd(30))} ${value}`);
     }
 }
 
 function renderUsageTab(data: StatusData): void {
+    const theme = createCommandTheme();
     const contextUsed = 100 - data.contextPercentLeft;
 
-    console.log(chalk.bold('Current session\n'));
+    console.log(theme.bold('Current session\n'));
 
     renderProgressBar('Context used', contextUsed, 100);
     console.log();
 
-    console.log(chalk.bold('Tokens used:'), formatTokens(data.totalTokensUsed));
+    console.log(theme.bold('Tokens used:'), formatTokens(data.totalTokensUsed));
 }
 
 function renderProgressBar(label: string, value: number, max: number): void {
+    const theme = createCommandTheme();
     const width = 30;
     const filled = Math.round((value / max) * width);
     const empty = width - filled;
-    const bar = chalk.cyan('\u2588'.repeat(filled)) + chalk.gray('\u2591'.repeat(empty));
+    const bar = theme.progressFilled('\u2588'.repeat(filled)) + theme.progressEmpty('\u2591'.repeat(empty));
     const percent = Math.round((value / max) * 100);
 
     console.log(label);