ui(polish) blend background color with theme (#18802)

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

@@ -9,7 +9,7 @@ import { useCallback, useState } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
 import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
-import { pickDefaultThemeName } from '../themes/theme.js';
+import { pickDefaultThemeName, type Theme } from '../themes/theme.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import { DiffRenderer } from './messages/DiffRenderer.js';
 import { colorizeCode } from '../utils/CodeColorizer.js';
@@ -27,7 +27,10 @@ import { useUIState } from '../contexts/UIStateContext.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
-  onSelect: (themeName: string, scope: LoadableSettingScope) => void;
+  onSelect: (
+    themeName: string,
+    scope: LoadableSettingScope,
+  ) => void | Promise<void>;
 
   /** Callback function when the dialog is cancelled */
   onCancel: () => void;
@@ -40,24 +43,21 @@ interface ThemeDialogProps {
   terminalWidth: number;
 }
 
-import {
-  getThemeTypeFromBackgroundColor,
-  resolveColor,
-} from '../themes/color-utils.js';
+import { resolveColor } from '../themes/color-utils.js';
 
 function generateThemeItem(
   name: string,
   typeDisplay: string,
-  themeType: string,
-  themeBackground: string | undefined,
+  fullTheme: Theme | undefined,
   terminalBackgroundColor: string | undefined,
-  terminalThemeType: 'light' | 'dark' | undefined,
 ) {
-  const isCompatible =
-    themeType === 'custom' ||
-    terminalThemeType === undefined ||
-    themeType === 'ansi' ||
-    themeType === terminalThemeType;
+  const isCompatible = fullTheme
+    ? themeManager.isThemeCompatible(fullTheme, terminalBackgroundColor)
+    : true;
+
+  const themeBackground = fullTheme
+    ? resolveColor(fullTheme.colors.Background)
+    : undefined;
 
   const isBackgroundMatch =
     terminalBackgroundColor &&
@@ -111,26 +111,17 @@ export function ThemeDialog({
 
   const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
-  const terminalThemeType = getThemeTypeFromBackgroundColor(
-    terminalBackgroundColor,
-  );
-
   // Generate theme items
   const themeItems = themeManager
     .getAvailableThemes()
     .map((theme) => {
       const fullTheme = themeManager.getTheme(theme.name);
-      const themeBackground = fullTheme
-        ? resolveColor(fullTheme.colors.Background)
-        : undefined;
 
       return generateThemeItem(
         theme.name,
         capitalize(theme.type),
-        theme.type,
-        themeBackground,
+        fullTheme,
         terminalBackgroundColor,
-        terminalThemeType,
       );
     })
     .sort((a, b) => {
@@ -149,8 +140,8 @@ export function ThemeDialog({
   const safeInitialThemeIndex = initialThemeIndex >= 0 ? initialThemeIndex : 0;
 
   const handleThemeSelect = useCallback(
-    (themeName: string) => {
-      onSelect(themeName, selectedScope);
+    async (themeName: string) => {
+      await onSelect(themeName, selectedScope);
       refreshStatic();
     },
     [onSelect, selectedScope, refreshStatic],
@@ -166,8 +157,8 @@ export function ThemeDialog({
   }, []);
 
   const handleScopeSelect = useCallback(
-    (scope: LoadableSettingScope) => {
-      onSelect(highlightedThemeName, scope);
+    async (scope: LoadableSettingScope) => {
+      await onSelect(highlightedThemeName, scope);
       refreshStatic();
     },
     [onSelect, highlightedThemeName, refreshStatic],