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

packages/cli/src/ui/hooks/useThemeCommand.ts

@@ -13,12 +13,16 @@ import type {
 import { MessageType } from '../types.js';
 import process from 'node:process';
 import type { UseHistoryManagerReturn } from './useHistoryManager.js';
+import { useTerminalContext } from '../contexts/TerminalContext.js';
 
 interface UseThemeCommandReturn {
   isThemeDialogOpen: boolean;
   openThemeDialog: () => void;
   closeThemeDialog: () => void;
-  handleThemeSelect: (themeName: string, scope: LoadableSettingScope) => void;
+  handleThemeSelect: (
+    themeName: string,
+    scope: LoadableSettingScope,
+  ) => Promise<void>;
   handleThemeHighlight: (themeName: string | undefined) => void;
 }
 
@@ -30,8 +34,9 @@ export const useThemeCommand = (
 ): UseThemeCommandReturn => {
   const [isThemeDialogOpen, setIsThemeDialogOpen] =
     useState(!!initialThemeError);
+  const { queryTerminalBackground } = useTerminalContext();
 
-  const openThemeDialog = useCallback(() => {
+  const openThemeDialog = useCallback(async () => {
     if (process.env['NO_COLOR']) {
       addItem(
         {
@@ -42,8 +47,14 @@ export const useThemeCommand = (
       );
       return;
     }
+
+    // Ensure we have an up to date terminal background color when opening the
+    // theme dialog as the user may have just changed it before opening the
+    // dialog.
+    await queryTerminalBackground();
+
     setIsThemeDialogOpen(true);
-  }, [addItem]);
+  }, [addItem, queryTerminalBackground]);
 
   const applyTheme = useCallback(
     (themeName: string | undefined) => {
@@ -72,7 +83,7 @@ export const useThemeCommand = (
   }, [applyTheme, loadedSettings]);
 
   const handleThemeSelect = useCallback(
-    (themeName: string, scope: LoadableSettingScope) => {
+    async (themeName: string, scope: LoadableSettingScope) => {
       try {
         const mergedCustomThemes = {
           ...(loadedSettings.user.settings.ui?.customThemes || {}),