Tailwind CSS Conventions

Theme Architecture

Uses CSS custom properties for theme-aware colors defined in src/renderer/index.css.

Core Surface Colors

--color-surface: #141416          /* Main background */
--color-surface-raised: #27272a   /* Elevated surfaces */
--color-surface-overlay: #27272a  /* Overlays/modals */
--color-surface-sidebar: #0f0f11  /* Sidebar background */

Border Colors

--color-border: rgba(255, 255, 255, 0.05)
--color-border-subtle: rgba(255, 255, 255, 0.05)
--color-border-emphasis: rgba(255, 255, 255, 0.1)

Text Colors

--color-text: #fafafa             /* Primary text */
--color-text-secondary: #a1a1aa   /* Secondary text */
--color-text-muted: #71717a       /* Muted text */

Tailwind Usage

Use theme-aware classes that reference CSS variables:

// Preferred - uses CSS variables for theme support
<div className="bg-surface text-text border-border">
<div className="bg-surface-raised text-text-secondary">

// Also available via claude-dark namespace
<div className="bg-claude-dark-bg text-claude-dark-text">

Additional CSS Variable Categories

Chat bubbles: --chat-user-*, --chat-ai-*, --chat-system-*
Code blocks: --code-*, --syntax-*, --inline-code-*
Diff viewer: --diff-added-*, --diff-removed-*
Tool blocks: --tool-call-*, --tool-result-*
Tool items: --tool-item-name, --tool-item-summary, --tool-item-muted, --tool-item-hover-bg
Badges: --badge-*, --tag-*
Search: --highlight-*
Scrollbar: --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-thumb-active
Prose/Markdown: --prose-heading, --prose-body, --prose-link, --prose-code-*, --prose-pre-*
Thinking blocks: --thinking-bg, --thinking-border, --thinking-text, --thinking-content-*
Output blocks: --output-bg, --output-border, --output-text, --output-content-border
Cards/Subagents: --card-bg, --card-border, --card-header-*, --card-icon-muted, --card-separator
Highlights: --skill-highlight-*, --path-highlight-*
UI elements: --interruption-*, --warning-*, --plan-exit-*, --error-highlight-*, --kbd-*, --context-btn-*

Dark/Light Theme

Both themes supported via :root and :root.light in index.css. Toggle via useTheme hook which adds/removes light class on root.

2.4 KiB Raw Blame History