@brimveyn/aimux 1.9.5 → 1.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",

package/src/app.tsx

@@ -35,7 +35,7 @@ import { loadSnippetCatalog } from './state/snippet-catalog'
 import { createInitialState } from './state/store'
 import { KeymapContext } from './ui/keymap-context'
 import { RootView } from './ui/root'
-import { applyTheme, setTransparent } from './ui/theme'
+import { applyTheme, setMode, setTransparent } from './ui/theme'
 import { isKnownThemeId, type ThemeId } from './ui/themes'
 import {
   fetchLatestNpmVersion,
@@ -71,10 +71,9 @@ export function App({
   const [themeId, setThemeId] = useState<ThemeId>(() => {
     const config = loadConfig()
     const persisted = config.themeId && isKnownThemeId(config.themeId) ? config.themeId : undefined
-    const fromConfig: ThemeId =
-      resolvedConfig.theme?.initialMode === 'light' ? 'aimux-light' : 'aimux-dark'
-    const initial: ThemeId = persisted ?? fromConfig
-    applyTheme(initial, resolvedConfig.theme?.paletteOverrides)
+    const initial: ThemeId = persisted ?? resolvedConfig.theme?.initialId ?? 'aimux'
+    applyTheme(initial)
+    if (resolvedConfig.theme?.initialMode) setMode(resolvedConfig.theme.initialMode)
     setTransparent(config.themeTransparent ?? false)
     return initial
   })

package/src/pty/terminal-snapshot.ts

@@ -2,7 +2,7 @@ import type { Terminal } from '@xterm/headless'
 
 import type { TerminalLine, TerminalSnapshot, TerminalSpan } from '../state/types'
 
-import { getCurrentTokens } from '../ui/theme'
+import { getCurrentTheme } from '../ui/theme'
 
 const SNAPSHOT_TAIL_LINE_COUNT = 10
 
@@ -115,17 +115,17 @@ function buildLine(
     let bg = getColorHex(current.getBgColor(), bgMode)
 
     if (current.isInverse()) {
-      const tokens = getCurrentTokens()
-      const resolvedFg = fg ?? tokens.palette.ink
-      const resolvedBg = bg ?? tokens.bg
+      const tokens = getCurrentTheme()
+      const resolvedFg = fg ?? tokens.text
+      const resolvedBg = bg ?? tokens.background
       ;[fg, bg] = [resolvedBg, resolvedFg]
     }
 
     const isCursorCell = cursorVisible && cursorColumn === column
     if (isCursorCell) {
-      const tokens = getCurrentTokens()
-      const resolvedFg = fg ?? tokens.palette.ink
-      const resolvedBg = bg ?? tokens.bg
+      const tokens = getCurrentTheme()
+      const resolvedFg = fg ?? tokens.text
+      const resolvedBg = bg ?? tokens.background
       ;[fg, bg] = [resolvedBg, resolvedFg]
     }
 

package/src/ui/components/git/diff-renderer/fold-strip.tsx

@@ -1,4 +1,4 @@
-import { useBg, useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { FOLD_STEP, type FoldInfo } from './build-rows'
 import { type FoldDispatch } from './pierre-diff'
 
@@ -8,11 +8,11 @@ interface Props {
 }
 
 function Button({ label, onPress }: { label: string; onPress: () => void }) {
-  const t = useTokens()
-  const bg = useBg('elevated')
+  const t = useTheme()
+  const bg = t.diffContextBg
   return (
     <box paddingLeft={1} paddingRight={1} backgroundColor={bg} onMouseDown={onPress}>
-      <text fg={t.palette.primary}>{label}</text>
+      <text fg={t.primary}>{label}</text>
     </box>
   )
 }
@@ -22,8 +22,8 @@ function Spacer() {
 }
 
 export function FoldStrip({ dispatch, fold }: Props) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.diffContextBg
   const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
   const stepUp = Math.min(FOLD_STEP, hidden)
   const stepDown = Math.min(FOLD_STEP, hidden)
@@ -71,7 +71,7 @@ export function FoldStrip({ dispatch, fold }: Props) {
 
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={t.muted}>{`⋯ ${hidden} hidden `}</text>
+      <text fg={t.textMuted}>{`⋯ ${hidden} hidden `}</text>
       {controls}
     </box>
   )

package/src/ui/components/git/diff-renderer/pierre-diff.tsx

@@ -8,7 +8,7 @@ import type { ThemeId } from '../../../themes'
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { type FoldState } from '../../../../state/types'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { buildDiffSegments, firstChangeSegmentOffset, gutterWidth } from './build-rows'
 import { SplitView, type SplitViewHandle } from './split-view'
 import { StackedView, type StackedViewHandle } from './stacked-view'
@@ -45,7 +45,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   { cacheKey, diff, path, themeId, view },
   ref
 ) {
-  const t = useTokens()
+  const t = useTheme()
   const preparation = useDiffPreparation(cacheKey, diff, path, themeId)
   const file = preparation.file ?? undefined
   const highlights: DiffHighlights = preparation.highlights
@@ -123,7 +123,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   if (!file) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>
+        <text fg={t.textMuted}>
           {preparation.preparing ? 'Preparing diff…' : '(could not parse diff)'}
         </text>
       </box>

package/src/ui/components/git/diff-renderer/split-view.tsx

@@ -20,7 +20,7 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../../git-view-controls'
-import { useBg, useTokens, useTransparent } from '../../../theme'
+import { useTheme, useTransparent } from '../../../theme'
 import {
   type DiffSegment,
   estimatedSegmentHeight,
@@ -67,7 +67,8 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
   { contentWidth, file, foldDispatch, highlights, requestSegmentHighlights, segments },
   ref
 ) {
-  const separatorBg = useBg('base')
+  const t = useTheme()
+  const separatorBg = t.background
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
   const measuredHeightsRef = useRef<Record<string, number>>({})
@@ -224,12 +225,12 @@ function SideRow({
 }
 
 function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.diffContextBg
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={t.muted}>{row.spec}</text>
-      {row.context ? <text fg={t.hover}> {row.context}</text> : null}
+      <text fg={t.text}>{row.spec}</text>
+      {row.context ? <text fg={t.textMuted}> {row.context}</text> : null}
     </box>
   )
 }
@@ -245,29 +246,29 @@ function HalfRow({
   height: number
   tokens: ThemedToken[][]
 }) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.diffContextBg
   const transparent = useTransparent()
   if (cell.type === 'filler') {
     return <box backgroundColor={headerBg} height={height} />
   }
   let bg: string | undefined
   let sign = ' '
-  let signColor = t.muted
+  let signColor = t.textMuted
   if (cell.type === 'addition') {
-    bg = t.diffAddBg
+    bg = t.diffAddedBg
     sign = '+'
-    signColor = t.palette.success
+    signColor = t.diffAdded
   } else if (cell.type === 'deletion') {
-    bg = t.diffDeleteBg
+    bg = t.diffRemovedBg
     sign = '-'
-    signColor = t.palette.error
+    signColor = t.diffRemoved
   }
   const num = String(cell.lineNumber).padStart(gw, ' ')
   const lineTokens = tokens[cell.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={height}>
-      <text fg={t.muted}>{` ${num} `}</text>
+      <text fg={t.textMuted}>{` ${num} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={cell.content} tokens={lineTokens} />
     </box>
@@ -275,9 +276,9 @@ function HalfRow({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const t = useTokens()
+  const t = useTheme()
   if (!tokens || tokens.length === 0) {
-    return <text fg={t.palette.ink}>{content}</text>
+    return <text fg={t.text}>{content}</text>
   }
   return (
     <text>
@@ -288,7 +289,7 @@ function LineContent({ content, tokens }: { content: string; tokens: ThemedToken
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.text} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/git/diff-renderer/stacked-view.tsx

@@ -20,7 +20,7 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../../git-view-controls'
-import { useBg, useTokens, useTransparent } from '../../../theme'
+import { useTheme, useTransparent } from '../../../theme'
 import {
   type DiffSegment,
   estimatedSegmentHeight,
@@ -179,14 +179,14 @@ function UnifiedRowRender({
   highlights: DiffHighlights
   row: UnifiedRowOrHeader
 }) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.diffContextBg
   const transparent = useTransparent()
   if (row.type === 'hunk-header') {
     return (
       <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-        <text fg={t.muted}>{row.spec}</text>
-        {row.context ? <text fg={t.hover}> {row.context}</text> : null}
+        <text fg={t.text}>{row.spec}</text>
+        {row.context ? <text fg={t.textMuted}> {row.context}</text> : null}
       </box>
     )
   }
@@ -199,21 +199,21 @@ function UnifiedRowRender({
     const tokens = highlights.add[row.lineIdx]
     return (
       <box flexDirection="row" height={row.height}>
-        <text fg={t.muted}>{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
-        <text fg={t.palette.ink}> </text>
+        <text fg={t.textMuted}>{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
+        <text fg={t.text}> </text>
         <LineContent content={row.content} tokens={tokens} />
       </box>
     )
   }
-  const bg = row.type === 'addition' ? t.diffAddBg : t.diffDeleteBg
+  const bg = row.type === 'addition' ? t.diffAddedBg : t.diffRemovedBg
   const sign = row.type === 'addition' ? '+' : '-'
-  const signColor = row.type === 'addition' ? t.palette.success : t.palette.error
+  const signColor = row.type === 'addition' ? t.diffAdded : t.diffRemoved
   const delNum = row.type === 'deletion' ? row.lineNumber : undefined
   const addNum = row.type === 'addition' ? row.lineNumber : undefined
   const tokens = row.type === 'addition' ? highlights.add[row.lineIdx] : highlights.del[row.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={row.height}>
-      <text fg={t.muted}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
+      <text fg={t.textMuted}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={row.content} tokens={tokens} />
     </box>
@@ -221,9 +221,9 @@ function UnifiedRowRender({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const t = useTokens()
+  const t = useTheme()
   if (!tokens || tokens.length === 0) {
-    return <text fg={t.palette.ink}>{content}</text>
+    return <text fg={t.text}>{content}</text>
   }
   return (
     <text>
@@ -234,7 +234,7 @@ function LineContent({ content, tokens }: { content: string; tokens: ThemedToken
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.text} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/git/git-panel.tsx

@@ -18,7 +18,7 @@ import {
   type GitTreeFileRow,
   type GitTreeFolderRow,
 } from '../../../state/git-tree'
-import { getCurrentTokens, getTransparent, useTokens, useTransparent } from '../../theme'
+import { getCurrentTheme, getTransparent, useTheme, useTransparent } from '../../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -49,19 +49,20 @@ const BASE_SECTION_ORDER: GitFileSection[] = ['staged', 'unstaged', 'untracked']
 const HISTORICAL_SECTION_ORDER: GitFileSection[] = ['historical', 'untracked']
 
 function statusColor(status: GitFileEntry['status']): string {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   switch (status) {
     case '?':
+      return t.text
     case 'A':
-      return t.palette.success
+      return t.diffAdded
     case 'C':
     case 'R':
-      return t.palette.primary
+      return t.text
     case 'D':
     case 'U':
-      return t.palette.error
+      return t.diffRemoved
     case 'M':
-      return t.palette.warning
+      return t.warning
   }
 }
 
@@ -99,7 +100,7 @@ function renderFileLabel(
   pathConfig: GitPanePathConfig,
   fileListMode: GitFileListMode
 ): ReactNode {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   const transform = pathConfig.enabled ? pathConfig.pathFn : undefined
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
@@ -108,8 +109,8 @@ function renderFileLabel(
   if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={t.palette.ink}>{basename}</span>
-        {showDir ? <span fg={t.muted}> {dir}</span> : null}
+        <span fg={t.text}>{basename}</span>
+        {showDir ? <span fg={t.textMuted}> {dir}</span> : null}
       </text>
     )
   }
@@ -118,11 +119,11 @@ function renderFileLabel(
   const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={t.muted}>{renamed.basename}</span>
-      {showDir && renamedDir ? <span fg={t.muted}> {renamedDir}</span> : null}
-      <span fg={t.muted}> → </span>
-      <span fg={t.palette.ink}>{basename}</span>
-      {showDir ? <span fg={t.muted}> {dir}</span> : null}
+      <span fg={t.textMuted}>{renamed.basename}</span>
+      {showDir && renamedDir ? <span fg={t.textMuted}> {renamedDir}</span> : null}
+      <span fg={t.textMuted}> → </span>
+      <span fg={t.text}>{basename}</span>
+      {showDir ? <span fg={t.textMuted}> {dir}</span> : null}
     </text>
   )
 }
@@ -136,28 +137,31 @@ function renderDiffCount(
   hasNumstat: boolean
 ): ReactNode {
   if (!diffCountConfig.enabled) return null
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   if (!hasNumstat) {
     return (
-      <text fg={t.muted} bg={bg} flexShrink={0}>
+      <text fg={t.textMuted} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text fg={t.palette.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={t.hover} bg={bg}>
+      <text fg={getCurrentTheme().diffAdded} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
+      <text fg={t.textMuted} bg={bg}>
         {' '}
       </text>
-      <text fg={t.palette.error} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
+      <text
+        fg={getCurrentTheme().diffRemoved}
+        bg={bg}
+      >{`−${padRight(file.removed, removedW)}`}</text>
     </box>
   )
 }
 
 function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const t = getCurrentTokens()
-  const bg = isSelected && !getTransparent() ? t.selected : undefined
+  const t = getCurrentTheme()
+  const bg = isSelected && !getTransparent() ? t.backgroundElement : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -168,13 +172,13 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
         <box flexDirection="row" gap={1} onMouseDown={onToggle}>
-          <text fg={t.muted} bg={bg}>
+          <text fg={t.textMuted} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={t.palette.primary} bg={bg}>
+          <text fg={getCurrentTheme().textMuted} bg={bg}>
             {row.isCollapsed ? '\uf07b' : '\uf07c'}
           </text>
-          <text fg={t.palette.primary} bg={bg} wrapMode="none">
+          <text fg={t.textMuted} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -193,10 +197,9 @@ function renderFileRow(
   diffCountConfig: GitPaneDiffCountConfig,
   repoPrefixes: Record<string, string>
 ): ReactNode {
-  const t = getCurrentTokens()
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected && !getTransparent() ? t.selected : undefined
+  const bg = isSelected && !getTransparent() ? getCurrentTheme().backgroundElement : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -213,7 +216,7 @@ function renderFileRow(
       </box>
       {repoTag ? (
         <box flexShrink={0}>
-          <text fg={t.palette.primary} bg={bg}>
+          <text fg={getCurrentTheme().primary} bg={bg}>
             <strong>{repoTag}</strong>
           </text>
         </box>
@@ -242,7 +245,7 @@ function renderTreeSection(
   repoPrefixes: Record<string, string>
 ): ReactNode {
   if (files.length === 0) return null
-  const t = getCurrentTokens()
+  const t2 = getCurrentTheme()
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
   const toggleListMode = (): void => {
     dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
@@ -251,16 +254,16 @@ function renderTreeSection(
   return (
     <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={t.accent}>
+        <text fg={t2.text}>
           <strong>
             {title} ({files.length})
           </strong>
         </text>
         {showListModeToggle ? (
           <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
-            <text fg={fileListMode === 'tree' ? t.palette.primary : t.muted}>tree</text>
-            <text fg={t.muted}>|</text>
-            <text fg={fileListMode === 'flat' ? t.palette.primary : t.muted}>flat</text>
+            <text fg={fileListMode === 'tree' ? t2.primary : t2.textMuted}>tree</text>
+            <text fg={t2.textMuted}>|</text>
+            <text fg={fileListMode === 'flat' ? t2.primary : t2.textMuted}>flat</text>
           </box>
         ) : null}
       </box>
@@ -301,18 +304,18 @@ function computeStatusPlaceholder(
   gitPanel: GitPanelState,
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   if (!hasProjectPath) {
-    return { label: 'No active session', labelColor: t.muted }
+    return { label: 'No active session', labelColor: t.textMuted }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return { label: 'Not a git repository', labelColor: t.muted }
+    return { label: 'Not a git repository', labelColor: t.textMuted }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: t.palette.error }
+    return { label: 'Git error', labelColor: t.error }
   }
   if (gitPanel.files.length === 0) {
-    return { label: 'Working tree clean', labelColor: t.muted }
+    return { label: 'Working tree clean', labelColor: t.textMuted }
   }
   return null
 }
@@ -331,7 +334,7 @@ export const GitPanel = memo(function GitPanel({
   projectPath,
   selectedEntryKey,
 }: GitPanelProps) {
-  const t = useTokens()
+  const t = useTheme()
   useTransparent()
   const repoPrefixes = useAppStore((s) => s.multiRepo.prefixes)
   const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
@@ -367,7 +370,7 @@ export const GitPanel = memo(function GitPanel({
   return (
     <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden" gap={0}>
       {hasRemoteTracking ? (
-        <text fg={t.muted}>
+        <text fg={t.textMuted}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}

package/src/ui/components/git/git-view.tsx

@@ -12,7 +12,7 @@ import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { getSelectedGitFile, gitFileKey } from '../../../state/git-tree'
 import { setGitDiffScroller } from '../../git-view-controls'
-import { useBg, useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
 import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
@@ -48,25 +48,25 @@ const DiffStage = memo(function DiffStage({
   themeId,
   view,
 }: DiffStageProps) {
-  const t = useTokens()
+  const t = useTheme()
   if (loading && !diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>Loading diff…</text>
+        <text fg={t.textMuted}>Loading diff…</text>
       </box>
     )
   }
   if (!diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>Select a file.</text>
+        <text fg={t.textMuted}>Select a file.</text>
       </box>
     )
   }
   if (diff.errorMessage) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.palette.error}>{diff.errorMessage}</text>
+        <text fg={t.error}>{diff.errorMessage}</text>
       </box>
     )
   }
@@ -75,7 +75,7 @@ const DiffStage = memo(function DiffStage({
   if (placeholder) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>{placeholder}</text>
+        <text fg={t.textMuted}>{placeholder}</text>
       </box>
     )
   }
@@ -84,7 +84,7 @@ const DiffStage = memo(function DiffStage({
     <box flexDirection="column" flexGrow={1} overflow="hidden">
       {diff.oldPath ? (
         <box paddingLeft={1} paddingRight={1}>
-          <text fg={t.muted}>
+          <text fg={t.textMuted}>
             renamed: {diff.oldPath} → {diff.path}
           </text>
         </box>
@@ -106,9 +106,9 @@ interface GitViewProps {
 }
 
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
-  const t = useTokens()
-  const sidebarBg = useBg('elevated')
-  const actionBg = useBg('selected')
+  const t = useTheme()
+  const sidebarBg = t.background
+  const actionBg = t.backgroundElement
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -196,13 +196,13 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   let footerNode: React.ReactNode = null
   if (pendingHint) {
     footerNode = (
-      <text fg={t.palette.warning}>
+      <text fg={t.warning}>
         <strong>{pendingHint}</strong>
       </text>
     )
   } else if (actionMessage) {
     footerNode = actionMessage.split('\n').map((line, idx) => (
-      <text key={idx} fg={t.palette.primary}>
+      <text key={idx} fg={t.primary}>
         {line}
       </text>
     ))
@@ -220,24 +220,24 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           overflow="hidden"
         >
           <box flexDirection="column" flexShrink={0}>
-            <text fg={t.palette.primary}>
+            <text fg={t.text}>
               <strong>aimux · git</strong>
             </text>
             {gitPanel.branch ? (
               <box flexDirection="row">
-                <text fg={t.palette.primary}>{'\u{e702}'} </text>
-                <text fg={t.muted}>{gitPanel.branch}</text>
+                <text fg={t.text}>{'\u{e702}'} </text>
+                <text fg={t.text}>{gitPanel.branch}</text>
               </box>
             ) : null}
             {gitMode.headOffset > 0 ? (
               <box flexDirection="row" gap={1}>
-                <text fg={t.palette.warning}>
+                <text fg={t.warning}>
                   <strong>HEAD~{gitMode.headOffset}</strong>
                 </text>
-                <text fg={t.muted}>[ newer · ] older</text>
+                <text fg={t.textMuted}>[ newer · ] older</text>
               </box>
             ) : null}
-            <text fg={t.hover}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
+            <text fg={t.textMuted}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
           </box>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
@@ -258,7 +258,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
             backgroundColor={sidebarBg}
           >
             <box flexGrow={1}>
-              <text fg={selectedFile ? t.palette.ink : t.muted}>
+              <text fg={selectedFile ? t.text : t.textMuted}>
                 {selectedFile ? selectedFile.path : 'Diff'}
               </text>
             </box>
@@ -272,7 +272,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
                 dispatchGlobal({ type: 'exit-git-mode' })
               }}
             >
-              <text fg={t.palette.ink}>
+              <text fg={t.text}>
                 <strong>Exit diff</strong>
               </text>
             </box>