Small improvements to native terminal colors

Author: jahooma

cli/src/app.tsx

@@ -16,6 +16,7 @@ import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTerminalFocus } from './hooks/use-terminal-focus'
 import { useTheme } from './hooks/use-theme'
 import { getProjectRoot } from './project-files'
+import { getLogoBlockColor, getLogoAccentColor } from './utils/theme-system'
 import { useChatStore } from './state/chat-store'
 import { openFileAtPath } from './utils/open-file'
 
@@ -50,10 +51,11 @@ export const App = ({
 
   // Sheen animation state for the logo
   const [sheenPosition, setSheenPosition] = useState(0)
-  const blockColor = theme.name === 'dark' ? '#ffffff' : '#000000'
+  const blockColor = getLogoBlockColor(theme.name)
+  const accentColor = getLogoAccentColor(theme.name)
   const { applySheenToChar } = useSheenAnimation({
     logoColor: theme.foreground,
-    accentColor: theme.primary,
+    accentColor,
     blockColor,
     terminalWidth,
     sheenPosition,
@@ -62,7 +64,7 @@ export const App = ({
 
   const { component: logoComponent } = useLogo({
     availableWidth: contentMaxWidth,
-    accentColor: theme.primary,
+    accentColor,
     blockColor,
     applySheenToChar,
   })

cli/src/components/login-modal.tsx

@@ -10,6 +10,7 @@ import { useLoginPolling } from '../hooks/use-login-polling'
 import { useLogo } from '../hooks/use-logo'
 import { useSheenAnimation } from '../hooks/use-sheen-animation'
 import { useTheme } from '../hooks/use-theme'
+import { getLogoBlockColor, getLogoAccentColor } from '../utils/theme-system'
 import {
   formatUrl,
   generateFingerprintId,
@@ -234,10 +235,11 @@ export const LoginModal = ({
   }, [loginUrl, copyToClipboard])
 
   // Use custom hook for sheen animation
-  const blockColor = theme.name === 'dark' ? '#ffffff' : '#000000'
+  const blockColor = getLogoBlockColor(theme.name)
+  const accentColor = getLogoAccentColor(theme.name)
   const { applySheenToChar } = useSheenAnimation({
     logoColor: theme.foreground,
-    accentColor: theme.primary,
+    accentColor,
     blockColor,
     terminalWidth: renderer?.width,
     sheenPosition,

cli/src/components/multiline-input.tsx

@@ -11,6 +11,7 @@ import {
 
 import { InputCursor } from './input-cursor'
 import { useTheme } from '../hooks/use-theme'
+import { supportsTruecolor } from '../utils/theme-system'
 import { useChatStore } from '../state/chat-store'
 import { logger } from '../utils/logger'
 import { clamp } from '../utils/math'
@@ -1048,7 +1049,7 @@ export const MultilineInput = forwardRef<
                 visible={true}
                 focused={focused}
                 shouldBlink={effectiveShouldBlinkCursor}
-                color={theme.info}
+                color={supportsTruecolor() ? theme.info : 'lime'}
                 key={lastActivity}
               />
             )}

cli/src/types/env.ts

@@ -22,6 +22,7 @@ export type CliEnv = BaseEnv & {
   ZED_NODE_ENV?: string
   ZED_TERM?: string
   ZED_SHELL?: string
+  COLORTERM?: string
 
   // VS Code family detection
   VSCODE_THEME_KIND?: string

cli/src/utils/env.ts

@@ -22,6 +22,7 @@ export const getCliEnv = (): CliEnv => ({
   ZED_NODE_ENV: process.env.ZED_NODE_ENV,
   ZED_TERM: process.env.ZED_TERM,
   ZED_SHELL: process.env.ZED_SHELL,
+  COLORTERM: process.env.COLORTERM,
 
   // VS Code family detection
   VSCODE_THEME_KIND: process.env.VSCODE_THEME_KIND,
@@ -79,6 +80,7 @@ export const createTestCliEnv = (overrides: Partial<CliEnv> = {}): CliEnv => ({
   ZED_NODE_ENV: undefined,
   ZED_TERM: undefined,
   ZED_SHELL: undefined,
+  COLORTERM: undefined,
   VSCODE_THEME_KIND: undefined,
   VSCODE_COLOR_THEME_KIND: undefined,
   VSCODE_GIT_IPC_HANDLE: undefined,

cli/src/utils/theme-system.ts

@@ -12,6 +12,100 @@ import type {
   ThemeName,
 } from '../types/theme-system'
 
+/**
+ * Check if the terminal supports truecolor (24-bit color).
+ * Terminals like macOS Terminal.app only support 256 colors and cannot
+ * render hex colors properly - they need ANSI color name fallbacks.
+ */
+// Cache the truecolor support result since it won't change during runtime
+let _truecolorSupport: boolean | null = null
+
+export function supportsTruecolor(env: CliEnv = getCliEnv()): boolean {
+  if (_truecolorSupport !== null) {
+    return _truecolorSupport
+  }
+  
+  const termProgram = env.TERM_PROGRAM?.toLowerCase() ?? ''
+  
+  // Terminal.app (Apple_Terminal) does NOT support truecolor - only 256 colors
+  if (termProgram === 'apple_terminal') {
+    _truecolorSupport = false
+    return false
+  }
+  
+  const colorterm = env.COLORTERM?.toLowerCase()
+  if (colorterm === 'truecolor' || colorterm === '24bit') {
+    _truecolorSupport = true
+    return true
+  }
+  
+  // Some terminals that are known to support truecolor
+  const truecolorTerminals = [
+    'iterm.app',
+    'hyper',
+    'wezterm',
+    'alacritty',
+    'kitty',
+    'ghostty',
+    'vscode',
+  ]
+  
+  if (truecolorTerminals.some(t => termProgram.includes(t))) {
+    _truecolorSupport = true
+    return true
+  }
+  
+  // Check TERM for known truecolor-capable values
+  const term = env.TERM?.toLowerCase() ?? ''
+  if (term.includes('truecolor') || term.includes('24bit')) {
+    _truecolorSupport = true
+    return true
+  }
+  
+  // xterm-kitty, alacritty, etc.
+  if (term === 'xterm-kitty' || term === 'alacritty' || term.includes('ghostty')) {
+    _truecolorSupport = true
+    return true
+  }
+  
+  _truecolorSupport = false
+  return false
+}
+
+
+
+/**
+ * Get the block color for the logo based on theme and terminal capabilities.
+ * In dark mode: white (#ffffff or 'white')
+ * In light mode: black (#000000 or 'black')
+ */
+export function getLogoBlockColor(
+  themeName: ThemeName,
+  env: CliEnv = getCliEnv(),
+): string {
+  const isTruecolor = supportsTruecolor(env)
+  if (themeName === 'dark') {
+    return isTruecolor ? '#ffffff' : 'white'
+  }
+  return isTruecolor ? '#000000' : 'black'
+}
+
+/**
+ * Get the accent color for the logo based on theme and terminal capabilities.
+ * Returns the primary green color with appropriate fallback.
+ */
+export function getLogoAccentColor(
+  themeName: ThemeName,
+  env: CliEnv = getCliEnv(),
+): string {
+  const isTruecolor = supportsTruecolor(env)
+  // The primary green color - 'lime' is CSS bright green
+  if (themeName === 'dark') {
+    return isTruecolor ? '#9EFC62' : 'lime'
+  }
+  return isTruecolor ? '#65A83E' : 'green'
+}
+
 const IDE_THEME_INFERENCE = {
   dark: [
     'dark',