Implement Tailwind-inspired theme system with variant support

- Create theme-config.ts with variant types (transparent, modal, embedded, custom)
- Add ThemeProvider and useTheme() hook for context-based theme access
- Add VariantProvider for setting theme variants in component trees
- Migrate all components to use useTheme() instead of theme props
- Add logoColor to theme interface, automatically resolved per light/dark mode
- Centralize background color resolution with applyVariantBackgrounds utility
- Export mergeThemeOverrides and cloneChatTheme from theme-system
- Clean up LoginModal to use modal variant with solid backgrounds
- Add plugin system foundation for future theme extensibility

This provides a clean, hook-based API where components call useTheme()
with no arguments and automatically get the appropriate theme variant
based on their parent context. Modal components wrap with VariantProvider
to get solid backgrounds instead of transparent ones.

Author: brandonkachen

cli/src/chat.tsx

@@ -36,6 +36,7 @@ import { useMessageRenderer } from './hooks/use-message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
+import { useTheme, useResolvedThemeName } from './hooks/use-theme'
 import { useChatStore } from './state/chat-store'
 import { flushAnalytics } from './utils/analytics'
 import { getUserCredentials } from './utils/auth'
@@ -50,9 +51,7 @@ import { logger } from './utils/logger'
 import { buildMessageTree } from './utils/message-tree-utils'
 import { handleSlashCommands } from './utils/slash-commands'
 import {
-  chatTheme,
   createMarkdownPalette,
-  onThemeChange,
   resolveThemeColor,
   type ChatTheme,
 } from './utils/theme-system'
@@ -170,42 +169,9 @@ export const App = ({
   const terminalWidth = resolvedTerminalWidth
   const separatorWidth = Math.max(1, Math.floor(terminalWidth) - 2)
 
-  const cloneTheme = (input: ChatTheme): ChatTheme => ({
-    ...input,
-    markdown: input.markdown
-      ? {
-          ...input.markdown,
-          headingFg: input.markdown.headingFg
-            ? { ...input.markdown.headingFg }
-            : undefined,
-        }
-      : undefined,
-  })
-
-  const [theme, setTheme] = useState<ChatTheme>(() => cloneTheme(chatTheme))
-  const [resolvedThemeName, setResolvedThemeName] = useState<'dark' | 'light'>(
-    chatTheme.messageTextAttributes ? 'dark' : 'light',
-  )
-
-  useEffect(() => {
-    const unsubscribe = onThemeChange((updatedTheme, meta) => {
-      const nextTheme = cloneTheme(updatedTheme)
-      setTheme(nextTheme)
-      setResolvedThemeName(meta.resolvedThemeName)
-      if (process.env.CODEBUFF_THEME_DEBUG === '1') {
-        logger.debug(
-          {
-            themeChange: {
-              source: meta.source,
-              resolvedThemeName: meta.resolvedThemeName,
-            },
-          },
-          'Applied theme change in chat component',
-        )
-      }
-    })
-    return unsubscribe
-  }, [])
+  // Use theme hooks (transparent variant is default)
+  const theme = useTheme()
+  const resolvedThemeName = useResolvedThemeName()
 
   const markdownPalette = useMemo(
     () => createMarkdownPalette(theme),
@@ -316,8 +282,6 @@ export const App = ({
           ? theme.chromeText
           : theme.agentResponseCount
 
-    const logoColor = resolvedThemeName === 'dark' ? '#4ade80' : '#15803d'
-
     const homeDir = os.homedir()
     const repoRoot = path.dirname(loadedAgentsData.agentsDir)
     const relativePath = path.relative(homeDir, repoRoot)
@@ -334,7 +298,7 @@ export const App = ({
         {
           type: 'text',
           content: '\n\n' + logoBlock,
-          color: logoColor,
+          color: theme.logoColor,
         },
       ]
 
@@ -1173,7 +1137,6 @@ export const App = ({
 
   const statusIndicatorNode = (
     <StatusIndicator
-      theme={theme}
       clipboardMessage={clipboardMessage}
       isActive={isStatusActive}
       timer={mainAgentTimer}
@@ -1388,12 +1351,11 @@ export const App = ({
             </text>
           </box>
         )}
-        <Separator theme={theme} width={separatorWidth} />
+        <Separator width={separatorWidth} />
         {slashContext.active && slashSuggestionItems.length > 0 ? (
           <SuggestionMenu
             items={slashSuggestionItems}
             selectedIndex={slashSelectedIndex}
-            theme={theme}
             maxVisible={5}
             prefix="/"
           />
@@ -1404,7 +1366,6 @@ export const App = ({
           <SuggestionMenu
             items={agentSuggestionItems}
             selectedIndex={agentSelectedIndex}
-            theme={theme}
             maxVisible={5}
             prefix="@"
           />
@@ -1424,7 +1385,6 @@ export const App = ({
               placeholder="Share your thoughts and press Enter…"
               focused={inputFocused}
               maxHeight={5}
-              theme={theme}
               width={inputWidth}
               onKeyIntercept={handleSuggestionMenuKey}
               textAttributes={theme.messageTextAttributes}
@@ -1439,19 +1399,17 @@ export const App = ({
           >
             <AgentModeToggle
               mode={agentMode}
-              theme={theme}
               onToggle={toggleAgentMode}
             />
           </box>
         </box>
-        <Separator theme={theme} width={separatorWidth} />
+        <Separator width={separatorWidth} />
       </box>
 
       {/* Login Modal Overlay - show when not authenticated and done checking */}
       {requireAuth !== null && isAuthenticated === false && (
         <LoginModal
           onLoginSuccess={handleLoginSuccess}
-          theme={theme}
           hasInvalidCredentials={hasInvalidCredentials}
         />
       )}

cli/src/components/__tests__/status-indicator.timer.test.tsx

@@ -13,12 +13,10 @@ import {
 } from 'bun:test'
 
 import { StatusIndicator } from '../status-indicator'
-import { chatThemes } from '../../utils/theme-system'
+import { ThemeProvider } from '../../hooks/use-theme'
 import { renderToStaticMarkup } from 'react-dom/server'
 import * as codebuffClient from '../../utils/codebuff-client'
 
-const theme = chatThemes.dark
-
 const createTimer = (elapsedSeconds: number, started: boolean) => ({
   start: () => {},
   stop: () => {},
@@ -41,36 +39,39 @@ describe('StatusIndicator timer rendering', () => {
 
   test('shows elapsed seconds when timer is active', () => {
     const markup = renderToStaticMarkup(
-      <StatusIndicator
-        theme={theme}
-        clipboardMessage={null}
-        isActive={true}
-        timer={createTimer(5, true)}
-      />,
+      <ThemeProvider>
+        <StatusIndicator
+          clipboardMessage={null}
+          isActive={true}
+          timer={createTimer(5, true)}
+        />
+      </ThemeProvider>,
     )
 
     expect(markup).toContain('5s')
 
     const inactiveMarkup = renderToStaticMarkup(
-      <StatusIndicator
-        theme={theme}
-        clipboardMessage={null}
-        isActive={false}
-        timer={createTimer(0, false)}
-      />,
+      <ThemeProvider>
+        <StatusIndicator
+          clipboardMessage={null}
+          isActive={false}
+          timer={createTimer(0, false)}
+        />
+      </ThemeProvider>,
     )
 
     expect(inactiveMarkup).toBe('')
   })
 
   test('clipboard message takes priority over timer output', () => {
     const markup = renderToStaticMarkup(
-      <StatusIndicator
-        theme={theme}
-        clipboardMessage="Copied!"
-        isActive={true}
-        timer={createTimer(12, true)}
-      />,
+      <ThemeProvider>
+        <StatusIndicator
+          clipboardMessage="Copied!"
+          isActive={true}
+          timer={createTimer(12, true)}
+        />
+      </ThemeProvider>,
     )
 
     expect(markup).toContain('Copied!')

cli/src/components/agent-mode-toggle.tsx

@@ -1,20 +1,33 @@
-import { AgentMode } from '../utils/constants'
-import type { ChatTheme } from '../utils/theme-system'
 import { RaisedPill } from './raised-pill'
+import { useTheme } from '../hooks/use-theme'
+
+import type { AgentMode } from '../utils/constants'
+import type { ChatTheme } from '../utils/theme-system'
+
+const getModeConfig = (theme: ChatTheme) =>
+  ({
+    FAST: {
+      frameColor: theme.modeToggleFastBg,
+      textColor: theme.modeToggleFastText,
+      label: 'FAST',
+    },
+    MAX: {
+      frameColor: theme.modeToggleMaxBg,
+      textColor: theme.modeToggleMaxText,
+      label: '💪 MAX',
+    },
+  }) as const
 
 export const AgentModeToggle = ({
   mode,
-  theme,
   onToggle,
 }: {
-  mode: AgentMode,
-  theme: ChatTheme
+  mode: AgentMode
   onToggle: () => void
 }) => {
-  const isFast = mode === 'FAST'
-  const frameColor = isFast ? theme.modeToggleFastBg : theme.modeToggleMaxBg
-  const textColor = isFast ? theme.modeToggleFastText : theme.modeToggleMaxText
-  const label = isFast ? 'FAST' : '💪 MAX'
+  const theme = useTheme()
+  const config = getModeConfig(theme)
+  const { frameColor, textColor, label } = config[mode]
 
   return (
     <RaisedPill

cli/src/components/login-modal.tsx

@@ -9,6 +9,7 @@ import { useLoginKeyboardHandlers } from '../hooks/use-login-keyboard-handlers'
 import { useLoginPolling } from '../hooks/use-login-polling'
 import { useLogo } from '../hooks/use-logo'
 import { useSheenAnimation } from '../hooks/use-sheen-animation'
+import { useTheme, VariantProvider } from '../hooks/use-theme'
 import {
   LINK_COLOR_DEFAULT,
   LINK_COLOR_CLICKED,
@@ -23,7 +24,6 @@ import {
 import {
   formatUrl,
   generateFingerprintId,
-  isLightModeColor,
   calculateResponsiveLayout,
   calculateModalDimensions,
 } from '../login/utils'
@@ -32,21 +32,35 @@ import { copyTextToClipboard } from '../utils/clipboard'
 import { logger } from '../utils/logger'
 
 import type { User } from '../utils/auth'
-import type { ChatTheme } from '../utils/theme-system'
 
 interface LoginModalProps {
   onLoginSuccess: (user: User) => void
-  theme: ChatTheme
   hasInvalidCredentials?: boolean | null
 }
 
 export const LoginModal = ({
   onLoginSuccess,
-  theme,
   hasInvalidCredentials = false,
+}: LoginModalProps) => {
+  return (
+    <VariantProvider variant="modal">
+      <LoginModalContent
+        onLoginSuccess={onLoginSuccess}
+        hasInvalidCredentials={hasInvalidCredentials}
+      />
+    </VariantProvider>
+  )
+}
+
+const LoginModalContent = ({
+  onLoginSuccess,
+  hasInvalidCredentials,
 }: LoginModalProps) => {
   const renderer = useRenderer()
 
+  // Use theme from context (will be modal variant due to VariantProvider)
+  const theme = useTheme()
+
   // Use zustand store for all state
   const {
     loginUrl,
@@ -219,28 +233,6 @@ export const LoginModal = ({
     }
   }, [hasOpenedBrowser, loginUrl, copyToClipboard])
 
-  // Determine if we're in light mode by checking text colors
-  // Note: We check text color instead of background because theme.background is 'transparent'
-  // In light mode: text is dark (#1f2937)
-  // In dark mode: text is light (#ffffff)
-  const isLightMode = useMemo(() => {
-    const textColor = theme.messageAiText
-    if (textColor && textColor !== 'default' && textColor.startsWith('#')) {
-      const textIsLight = isLightModeColor(textColor)
-      // Light text = dark background = dark mode
-      // Dark text = light background = light mode
-      return !textIsLight
-    }
-    // Fallback to dark mode if we can't determine
-    return false
-  }, [theme.messageAiText])
-
-  // Use pure black/white for logo
-  const logoColor = isLightMode ? '#000000' : '#ffffff'
-
-  // Use solid background colors for the modal (instead of transparent theme.background)
-  const modalBackground = isLightMode ? '#ffffff' : '#000000'
-
   // Calculate terminal width and height for responsive display
   const terminalWidth = renderer?.width || 80
   const terminalHeight = renderer?.height || 24
@@ -278,7 +270,7 @@ export const LoginModal = ({
 
   // Use custom hook for sheen animation
   const { applySheenToChar } = useSheenAnimation({
-    logoColor,
+    logoColor: theme.logoColor,
     terminalWidth: renderer?.width,
     sheenPosition,
     setSheenPosition,
@@ -319,7 +311,7 @@ export const LoginModal = ({
         width: modalWidth,
         height: modalHeight,
         maxHeight: modalHeight,
-        backgroundColor: modalBackground,
+        backgroundColor: theme.background,
         padding: 0,
         flexDirection: 'column',
       }}
@@ -352,7 +344,7 @@ export const LoginModal = ({
           alignItems: 'center',
           width: '100%',
           height: '100%',
-          backgroundColor: modalBackground,
+          backgroundColor: theme.background,
           padding: containerPadding,
           gap: 0,
         }}