Light theme color improvements (#4396)

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

@@ -36,16 +36,15 @@ export function ThemeDialog({
     SettingScope.User,
   );
 
+  const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
   // Generate theme items
-  const themeItems = themeManager.getAvailableThemes().map((theme) => {
+  const themeItems = themeManager.getAvailableThemes().map((theme) => ({
-    const typeString = theme.type.charAt(0).toUpperCase() + theme.type.slice(1);
-    return {
     label: theme.name,
     value: theme.name,
     themeNameDisplay: theme.name,
-      themeTypeDisplay: typeString,
+    themeTypeDisplay: capitalize(theme.type),
-    };
+  }));
-  });
   const [selectInputKey, setSelectInputKey] = useState(Date.now());
 
   // Determine which radio button should be initially selected in the theme list
@@ -173,10 +172,17 @@ export function ThemeDialog({
     availableTerminalHeight -
     PREVIEW_PANE_FIXED_VERTICAL_SPACE -
     (includePadding ? 2 : 0) * 2;
-  // Give slightly more space to the code block as it is 3 lines longer.
-  const diffHeight = Math.floor(availableTerminalHeightCodeBlock / 2) - 1;
-  const codeBlockHeight = Math.ceil(availableTerminalHeightCodeBlock / 2) + 1;
 
+  // Subtract margin between code blocks from available height.
+  const availableHeightForPanes = Math.max(
+    0,
+    availableTerminalHeightCodeBlock - 1,
+  );
+
+  // The code block is slightly longer than the diff, so give it more space.
+  const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6);
+  const diffHeight = Math.floor(availableHeightForPanes * 0.4);
+  const themeType = capitalize(themeManager.getActiveTheme().type);
   return (
     <Box
       borderStyle="round"
@@ -227,7 +233,7 @@ export function ThemeDialog({
 
         {/* Right Column: Preview */}
         <Box flexDirection="column" width="55%" paddingLeft={2}>
-          <Text bold>Preview</Text>
+          <Text bold>{themeType} Theme Preview</Text>
           <Box
             borderStyle="single"
             borderColor={Colors.Gray}
@@ -238,25 +244,25 @@ export function ThemeDialog({
             flexDirection="column"
           >
             {colorizeCode(
-              `# function
+              `# python function
--def fibonacci(n):
+def fibonacci(n):
--    a, b = 0, 1
+    a, b = 0, 1
--    for _ in range(n):
+    for _ in range(n):
--        a, b = b, a + b
+        a, b = b, a + b
--    return a`,
+    return a`,
               'python',
               codeBlockHeight,
               colorizeCodeWidth,
             )}
             <Box marginTop={1} />
             <DiffRenderer
-              diffContent={`--- a/old_file.txt
+              diffContent={`--- a/util.py
--+++ b/new_file.txt
++++ b/util.py
--@@ -1,4 +1,5 @@
+@@ -1,3 +1,3 @@
-- This is a context line.
+ def greet(name):
---This line was deleted.
+-    print("Hello, " + name)
--+This line was added.
++    print(f"Hello, {name}!")
--`}
+`}
               availableTerminalHeight={diffHeight}
               terminalWidth={colorizeCodeWidth}
             />

packages/cli/src/ui/themes/ansi-light.ts

@@ -9,7 +9,7 @@ import { type ColorsTheme, Theme } from './theme.js';
 const ansiLightColors: ColorsTheme = {
   type: 'light',
   Background: 'white',
-  Foreground: 'black',
+  Foreground: '#444',
   LightBlue: 'blue',
   AccentBlue: 'blue',
   AccentPurple: 'purple',

packages/cli/src/ui/themes/googlecode.ts

@@ -9,7 +9,7 @@ import { lightTheme, Theme, type ColorsTheme } from './theme.js';
 const googleCodeColors: ColorsTheme = {
   type: 'light',
   Background: 'white',
-  Foreground: 'black',
+  Foreground: '#444',
   LightBlue: '#066',
   AccentBlue: '#008',
   AccentPurple: '#606',

packages/cli/src/ui/themes/xcode.ts

@@ -9,7 +9,7 @@ import { type ColorsTheme, Theme } from './theme.js';
 const xcodeColors: ColorsTheme = {
   type: 'light',
   Background: '#fff',
-  Foreground: 'black',
+  Foreground: '#444',
   LightBlue: '#0E0EFF',
   AccentBlue: '#1c00cf',
   AccentPurple: '#aa0d91',