feat(cli): add automatic system theme detection

- Add useSystemThemeDetector hook for automatic theme syncing
- Implement fast macOS theme watcher (0.5s polling) via bash script
- Remove manual theme toggle (Cmd+T) - theme now follows system only
- Falls back to 60s polling on non-macOS or if watcher fails
- Configurable via OPEN_TUI_THEME_POLL_INTERVAL env var

Author: brandonkachen

cli/src/chat.tsx

@@ -11,15 +11,14 @@ import { useMessageQueue } from './hooks/use-message-queue'
 import { useMessageRenderer } from './hooks/use-message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
+import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
 import { formatTimestamp, formatQueuedPreview } from './utils/helpers'
 import { logger } from './utils/logger'
 import { buildMessageTree } from './utils/message-tree-utils'
 
 import {
-  type ThemeName,
   chatThemes,
   createMarkdownPalette,
-  detectSystemTheme,
 } from './utils/theme-system'
 import { TextAttributes } from '@opentui/core'
 
@@ -74,9 +73,7 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
   const inputRef = useRef<InputRenderable | null>(null)
 
-  const [themeName, setThemeName] = useState<ThemeName>(() =>
-    detectSystemTheme(),
-  )
+  const themeName = useSystemThemeDetector()
   const theme = chatThemes[themeName]
   const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])
 
@@ -217,12 +214,7 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     isChainInProgressRef,
   ])
 
-  const handleThemeToggle = useCallback(() => {
-    setThemeName((prev) => (prev === 'dark' ? 'light' : 'dark'))
-  }, [])
-
   useKeyboardHandlers({
-    onThemeToggle: handleThemeToggle,
     isStreaming,
     isWaitingForResponse,
     abortControllerRef,

cli/src/hooks/use-keyboard-handlers.ts

@@ -4,7 +4,6 @@ import { useCallback } from 'react'
 import type { InputRenderable } from '@opentui/core'
 
 interface KeyboardHandlersConfig {
-  onThemeToggle: () => void
   isStreaming: boolean
   isWaitingForResponse: boolean
   abortControllerRef: React.MutableRefObject<AbortController | null>
@@ -18,7 +17,6 @@ interface KeyboardHandlersConfig {
 }
 
 export const useKeyboardHandlers = ({
-  onThemeToggle,
   isStreaming,
   isWaitingForResponse,
   abortControllerRef,
@@ -30,17 +28,6 @@ export const useKeyboardHandlers = ({
   navigateUp,
   navigateDown,
 }: KeyboardHandlersConfig) => {
-  useKeyboard(
-    useCallback(
-      (key) => {
-        if (key.ctrl && key.name === 't') {
-          onThemeToggle()
-        }
-      },
-      [onThemeToggle],
-    ),
-  )
-
   useKeyboard(
     useCallback(
       (key) => {

cli/src/hooks/use-system-theme-detector.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react'
+import { type ThemeName, detectSystemTheme } from '../utils/theme-system'
+import {
+  spawnMacOSThemeListener,
+  type ThemeListenerProcess,
+} from '../utils/theme-listener-macos'
+
+const DEFAULT_POLL_INTERVAL_MS = 60000 // 60 seconds
+
+/**
+ * Automatically detects system theme changes.
+ * On macOS, uses a lightweight background watcher that checks every 0.5s.
+ * Falls back to slower polling on other platforms or if watcher fails.
+ *
+ * @returns The current system theme name
+ *
+ * Environment Variables:
+ * - OPEN_TUI_THEME_POLL_INTERVAL: Polling interval in milliseconds (default: 60000)
+ *   Set to 0 to disable automatic polling (only affects non-macOS or if watcher fails)
+ */
+export const useSystemThemeDetector = (): ThemeName => {
+  const [themeName, setThemeName] = useState<ThemeName>(() => detectSystemTheme())
+  const lastThemeRef = useRef<ThemeName>(themeName)
+  const listenerRef = useRef<ThemeListenerProcess | null>(null)
+
+  useEffect(() => {
+    const handleThemeChange = () => {
+      const currentTheme = detectSystemTheme()
+
+      // Only update state if theme actually changed
+      if (currentTheme !== lastThemeRef.current) {
+        lastThemeRef.current = currentTheme
+        setThemeName(currentTheme)
+      }
+    }
+
+    // Try to use macOS listener first (instant, event-driven)
+    if (process.platform === 'darwin') {
+      const listener = spawnMacOSThemeListener(handleThemeChange)
+      if (listener) {
+        listenerRef.current = listener
+        // Successfully spawned listener, no need for polling
+        return () => {
+          listenerRef.current?.kill()
+          listenerRef.current = null
+        }
+      }
+    }
+
+    // Fall back to polling for non-macOS or if listener failed
+    const envInterval = process.env.OPEN_TUI_THEME_POLL_INTERVAL
+    const pollIntervalMs = envInterval
+      ? parseInt(envInterval, 10)
+      : DEFAULT_POLL_INTERVAL_MS
+
+    // If interval is 0 or invalid, disable polling
+    if (!pollIntervalMs || pollIntervalMs <= 0 || isNaN(pollIntervalMs)) {
+      return
+    }
+
+    const intervalId = setInterval(handleThemeChange, pollIntervalMs)
+
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [])
+
+  return themeName
+}

cli/src/utils/theme-listener-macos.ts

@@ -0,0 +1,114 @@
+/**
+ * macOS theme change listener using polling
+ * Checks the system theme preference every 0.5 seconds
+ */
+
+// Shell script that polls for theme changes
+const WATCH_SCRIPT = `
+# Initial value
+LAST_VALUE=""
+
+while true; do
+  # Check if AppleInterfaceStyle key exists (Dark mode)
+  CURRENT_VALUE=$(defaults read -g AppleInterfaceStyle 2>/dev/null || echo "Light")
+
+  # If changed, output notification
+  if [ "$LAST_VALUE" != "" ] && [ "$CURRENT_VALUE" != "$LAST_VALUE" ]; then
+    echo "THEME_CHANGED"
+  fi
+
+  LAST_VALUE="$CURRENT_VALUE"
+
+  # Wait a bit before checking again (very lightweight)
+  sleep 0.5
+done
+`
+
+export interface ThemeListenerProcess {
+  kill: () => void
+}
+
+/**
+ * Spawns a shell script that watches for macOS theme changes
+ * @param onThemeChange - Callback invoked when theme changes
+ * @returns Process handle to clean up later
+ */
+export const spawnMacOSThemeListener = (
+  onThemeChange: () => void,
+): ThemeListenerProcess | null => {
+  if (typeof Bun === 'undefined') {
+    return null
+  }
+
+  if (process.platform !== 'darwin') {
+    return null
+  }
+
+  const bash = Bun.which('bash')
+  if (!bash) {
+    return null
+  }
+
+  try {
+    const proc = Bun.spawn({
+      cmd: [bash, '-c', WATCH_SCRIPT],
+      stdout: 'pipe',
+      stderr: 'pipe',
+    })
+
+    // Read stderr to prevent blocking
+    const readStderr = async () => {
+      const reader = proc.stderr.getReader()
+      try {
+        while (true) {
+          const { done } = await reader.read()
+          if (done) break
+        }
+      } catch {
+        // Process was killed or errored, ignore
+      }
+    }
+
+    readStderr()
+
+    // Read stdout line by line
+    const readStdout = async () => {
+      const reader = proc.stdout.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+
+          buffer += decoder.decode(value, { stream: true })
+          const lines = buffer.split('\n')
+          buffer = lines.pop() || ''
+
+          for (const line of lines) {
+            if (line.trim() === 'THEME_CHANGED') {
+              onThemeChange()
+            }
+          }
+        }
+      } catch {
+        // Process was killed or errored, ignore
+      }
+    }
+
+    readStdout()
+
+    return {
+      kill: () => {
+        try {
+          proc.kill()
+        } catch {
+          // Ignore errors when killing
+        }
+      },
+    }
+  } catch {
+    return null
+  }
+}