From 8999a885f0a8762c213eef059477dc5e754e110d Mon Sep 17 00:00:00 2001
From: JAYADITYA <96861162+JayadityaGit@users.noreply.github.com>
Date: Wed, 22 Apr 2026 01:27:15 +0530
Subject: [PATCH] fix(cli): ensure theme dialog labels are rendered for all
themes (#24599)
Co-authored-by: cynthialong0-0 <82900738+cynthialong0-0@users.noreply.github.com>
---
.../src/ui/components/ThemeDialog.test.tsx | 2 +-
.../cli/src/ui/components/ThemeDialog.tsx | 23 +++++++++++++------
.../__snapshots__/ThemeDialog.test.tsx.snap | 10 ++++----
3 files changed, 22 insertions(+), 13 deletions(-)
diff --git a/packages/cli/src/ui/components/ThemeDialog.test.tsx b/packages/cli/src/ui/components/ThemeDialog.test.tsx
index dbb980071a..41264980f5 100644
--- a/packages/cli/src/ui/components/ThemeDialog.test.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.test.tsx
@@ -219,7 +219,7 @@ describe('Hint Visibility', () => {
,
{
settings,
- uiState: { terminalBackgroundColor: '#FFFFFF' },
+ uiState: { terminalBackgroundColor: '#123456' },
},
);
diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 4bfb623db7..49683fd950 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -287,11 +287,15 @@ export function ThemeDialog({
const itemWithExtras = item as typeof item & {
themeWarning?: string;
themeMatch?: string;
+ themeNameDisplay?: string;
+ themeTypeDisplay?: string;
};
- if (item.themeNameDisplay && item.themeTypeDisplay) {
- const match = item.themeNameDisplay.match(/^(.*) \((.*)\)$/);
- let themeNamePart: React.ReactNode = item.themeNameDisplay;
+ if (itemWithExtras.themeNameDisplay) {
+ const match =
+ itemWithExtras.themeNameDisplay.match(/^(.*) \((.*)\)$/);
+ let themeNamePart: React.ReactNode =
+ itemWithExtras.themeNameDisplay;
if (match) {
themeNamePart = (
<>
@@ -303,10 +307,15 @@ export function ThemeDialog({
return (
- {themeNamePart}{' '}
-
- {item.themeTypeDisplay}
-
+ {themeNamePart}
+ {itemWithExtras.themeTypeDisplay ? (
+ <>
+ {' '}
+
+ {itemWithExtras.themeTypeDisplay}
+
+
+ ) : null}
{itemWithExtras.themeMatch && (
{itemWithExtras.themeMatch}
diff --git a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
index 258e994bfa..37ed33585c 100644
--- a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
+++ b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │
│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │
│ 11. Tokyo Night Dark │ │ │
-│ 12. ANSI Light └─────────────────────────────────────────────────┘ │
+│ 12. ANSI Light (Incompatible) └─────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
@@ -32,7 +32,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
│ ▲ ┌─────────────────────────────────────────────────┐ │
│ 1. ANSI Light │ │ │
│ 2. Ayu Light │ 1 # function │ │
-│ ● 3. Default Light │ 2 def fibonacci(n): │ │
+│ ● 3. Default Light (Matches terminal) │ 2 def fibonacci(n): │ │
│ 4. GitHub Light │ 3 a, b = 0, 1 │ │
│ 5. GitHub Light Colorblind Light (Mat… │ 4 for _ in range(n): │ │
│ 6. Google Code Light │ 5 a, b = b, a + b │ │
@@ -66,7 +66,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │
│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │
│ 11. Tokyo Night Dark │ │ │
-│ 12. ANSI Light └─────────────────────────────────────────────────┘ │
+│ 12. ANSI Light (Incompatible) └─────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
@@ -105,7 +105,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │
│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │
│ 11. Tokyo Night Dark │ │ │
-│ 12. ANSI Light └─────────────────────────────────────────────────┘ │
+│ 12. ANSI Light (Incompatible) └─────────────────────────────────────────────────┘ │
│ ▼ │
│ │
│ (Use Enter to select, Tab to configure scope, Esc to close) │
@@ -130,7 +130,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
│ 9. Shades Of Purple Dark │ 1 - print("Hello, " + name) │ │
│ 10. Solarized Dark │ 1 + print(f"Hello, {name}!") │ │
│ 11. Tokyo Night Dark │ │ │
-│ 12. ANSI Light └─────────────────────────────────────────────────┘ │
+│ 12. ANSI Light (Incompatible) └─────────────────────────────────────────────────┘ │
│ ▼ │
│ ╭─────────────────────────────────────────────────╮ │
│ │ DEVELOPER TOOLS (Not visible to users) │ │