CSS variables

Every --aparte-* theme variable, straight from the stylesheet — 226 in total. Override any of them as shown in Theming. This page is generated from the source, so it can never drift from the code.

Base Colors

Variable	Default	Notes
--aparte-primary	#b07d33
--aparte-primary-hover	#a06f28
--aparte-secondary	#9a8fb0
--aparte-neutral	#6d6479

Backgrounds & Surfaces

Variable	Default	Notes
--aparte-bg	#f6f2ea
--aparte-surface-1	#fffdf8	Bubbles, cards
--aparte-surface-2	#f1ebdf	Code blocks, headers
--aparte-surface-3	#e7dfce	Skeletons, disabled

Text

Variable	Default	Notes
--aparte-text	#241f2b
--aparte-text-muted	#6d6479
--aparte-text-inverse	#fffdf8

Borders

Variable	Default	Notes
--aparte-border	#e5ddce
--aparte-border-focus	var(--aparte-primary)
--aparte-border-width	1px

Status Colors

Variable	Default	Notes
--aparte-info	#3b82f6
--aparte-success	#10b981
--aparte-warning	#f59e0b
--aparte-error	#ef4444

Radius scale

Variable	Default	Notes
--aparte-radius-xs	2px
--aparte-radius-sm	4px
--aparte-radius-md	6px
--aparte-radius-lg	8px
--aparte-radius-xl	12px
--aparte-radius-full	9999px

Component-specific radius (overridable per app)

Variable	Default	Notes
--aparte-radius-input	var(--aparte-radius-lg)
--aparte-radius-input-footer	var(--aparte-radius-lg)
--aparte-radius-send-btn	var(--aparte-radius-md)
--aparte-radius-action-btn	var(--aparte-radius-sm)
--aparte-radius-select	var(--aparte-radius-md)
--aparte-radius-avatar	var(--aparte-radius-md)
--aparte-radius-bubble	var(--aparte-radius-lg)
--aparte-radius-code	var(--aparte-radius-lg)
--aparte-radius-thinking	var(--aparte-radius-lg)
--aparte-radius-terminal	var(--aparte-radius-lg)
--aparte-radius-error	var(--aparte-radius-md)
--aparte-radius-file-tree	var(--aparte-radius-lg)
--aparte-space-1	2px
--aparte-space-2	4px
--aparte-space-3	6px
--aparte-space-4	8px
--aparte-space-5	10px
--aparte-space-6	12px
--aparte-space-7	14px
--aparte-space-8	16px

Font-size scale — component text sizes reference these (no raw px sizes).

Variable	Default	Notes
--aparte-font-size-2xs	10px
--aparte-font-size-xs	11px
--aparte-font-size-sm	12px
--aparte-font-size-md	13px
--aparte-font-size-lg	14px
--aparte-font-size-base	15px

Font-weight scale — every font-weight references these (no raw weights).

Variable	Default	Notes
--aparte-font-weight-normal	400
--aparte-font-weight-medium	500
--aparte-font-weight-semibold	600
--aparte-font-weight-bold	700

Line-height scale — every line-height references these (no raw values).

Variable	Default	Notes
--aparte-line-height-none	1
--aparte-line-height-tight	1.25
--aparte-line-height-normal	1.5
--aparte-line-height-relaxed	1.6
--aparte-line-height-loose	1.7

Typography

Variable	Default	Notes
--aparte-font-family	system-ui, -apple-system, sans-serif

Text/icon over a —aparte-primary (brass) fill — send button, run button.

Variable	Default	Notes
--aparte-on-primary	#ffffff	Focus ring — derived from the accent so it themes automatically.
--aparte-focus-ring	0 0 0 3px color-mix(in srgb, var(--aparte-primary) 15%, transparent)	Outline width for keyboard focus + drag-over indicators.
--aparte-focus-outline-width	2px	Scrollbars rendered by the library.
--aparte-scrollbar-width	6px	Comfortable hit-area on coarse (touch) pointers.
--aparte-touch-target-size	44px

Messages

Variable	Default	Notes
--aparte-message-gap	12px
--aparte-message-padding	16px 12px
--aparte-message-max-width	800px
--aparte-message-content-bg-user	#efe7f6
--aparte-message-content-bg-assistant	transparent
--aparte-message-content-text-user	var(--aparte-text)
--aparte-message-content-text-assistant	var(--aparte-text)
--aparte-message-content-padding	10px 14px
--aparte-message-content-radius	14px
--aparte-surface	var(--aparte-surface-1)
--aparte-surface-hover	var(--aparte-surface-2)
--aparte-text-secondary	var(--aparte-text-muted)
--aparte-accent	var(--aparte-primary)
--aparte-success-border	var(--aparte-success)
--aparte-success-surface	color-mix(in oklch, var(--aparte-success) 12%, transparent)
--aparte-error-border-soft	var(--aparte-error)
--aparte-error-surface	color-mix(in oklch, var(--aparte-error) 12%, transparent)

Code typography — exposed so apps can swap in Geist Mono / Cascadia / …

Variable	Default	Notes
--aparte-code-font-family	ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Geist Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace

Attachments

Variable	Default	Notes
--aparte-attachment-chip-bg	var(--aparte-surface-2)
--aparte-attachment-chip-border	var(--aparte-border)
--aparte-attachment-chip-radius	var(--aparte-radius-sm)
--aparte-attachment-chip-color	var(--aparte-text)
--aparte-attachment-image-size	72px
--aparte-attachments-max-height	140px

Attachment thumbnail tile (composer preview + sent-message strip)

Variable	Default	Notes
--aparte-thumb-radius	var(--aparte-radius-lg)
--aparte-thumb-name-color	#ffffff
--aparte-thumb-name-scrim	linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0))
--aparte-thumb-name-padding	14px 5px 4px
--aparte-thumb-remove-size	18px
--aparte-thumb-remove-inset	3px
--aparte-thumb-remove-bg	rgba(0, 0, 0, 0.6)
--aparte-thumb-remove-bg-hover	rgba(0, 0, 0, 0.85)
--aparte-thumb-remove-color	#ffffff

Action Bar

Variable	Default	Notes
--aparte-action-bar-gap	4px
--aparte-action-bar-btn-size	28px
--aparte-action-bar-btn-color	var(--aparte-text-muted)
--aparte-action-bar-btn-hover-bg	var(--aparte-surface-2)
--aparte-action-bar-btn-hover-color	var(--aparte-text)

Branch Picker

Variable	Default	Notes
--aparte-branch-picker-gap	4px
--aparte-branch-picker-btn-size	20px
--aparte-branch-picker-btn-icon-size	16px
--aparte-branch-picker-btn-color	var(--aparte-text-muted)
--aparte-branch-picker-btn-hover-color	var(--aparte-text)
--aparte-branch-picker-label-size	12px
--aparte-branch-picker-label-color	var(--aparte-text-muted)
--aparte-branch-picker-label-min-width	32px

Avatars

Variable	Default	Notes
--aparte-avatar-size	32px
--aparte-avatar-font-size	14px
--aparte-avatar-radius	var(--aparte-radius-avatar)
--aparte-avatar-bg-user	var(--aparte-primary)
--aparte-avatar-text-user	var(--aparte-text-inverse)
--aparte-avatar-bg-assistant	var(--aparte-surface-3)
--aparte-avatar-text-assistant	var(--aparte-text-inverse)
--aparte-avatar-image-user	none
--aparte-avatar-image-assistant	none
--aparte-avatar-image-size	90%

Text Sizes

Variable	Default	Notes
--aparte-name-font-size	14px
--aparte-name-color	var(--aparte-text)
--aparte-timestamp-font-size	12px
--aparte-timestamp-color	var(--aparte-text-muted)
--aparte-content-font-size	15px
--aparte-content-color	var(--aparte-text)

Input

Variable	Default	Notes
--aparte-input-bg	var(--aparte-surface-1)
--aparte-input-border	var(--aparte-border)
--aparte-input-text	var(--aparte-text)
--aparte-input-placeholder	var(--aparte-text-muted)
--aparte-input-focus-border	var(--aparte-primary)
--aparte-input-gap	8px
--aparte-input-editor-font-size	15px
--aparte-input-editor-max-height	200px
--aparte-input-container-min-height	44px

Send button + inline action buttons

Variable	Default	Notes
--aparte-send-btn-size	36px
--aparte-input-action-btn-size	36px
--aparte-input-action-btn-icon-size	20px
--aparte-select-min-width	120px

Status Indicator

Variable	Default	Notes
--aparte-status-color	var(--aparte-text-muted)
--aparte-status-bg	transparent
--aparte-status-dot-size	6px

Thinking Segment

Variable	Default	Notes
--aparte-thinking-border	var(--aparte-border)
--aparte-thinking-bg	var(--aparte-surface-2)
--aparte-thinking-text	var(--aparte-text-muted)
--aparte-thinking-content	var(--aparte-text)
--aparte-thinking-content-bg	var(--aparte-surface-1)
--aparte-thinking-content-max-height	300px
--aparte-thinking-content-line-height	1.55
--aparte-thinking-toggle-size	9px
--aparte-thinking-rail-width	2px

Code Blocks

Variable	Default	Notes
--aparte-code-bg	var(--aparte-surface-1)
--aparte-code-header-bg	var(--aparte-surface-2)
--aparte-code-border	var(--aparte-border)
--aparte-code-header-text	var(--aparte-text-muted)
--aparte-code-copy-hover-bg	rgba(0, 0, 0, 0.05)
--aparte-code-copy-icon-size	14px
--aparte-code-inline-font-size	0.875em

Terminal

Variable	Default	Notes
--aparte-terminal-bg	#1e293b
--aparte-terminal-text	#e2e8f0
--aparte-terminal-icon	#64748b
--aparte-terminal-hover	#334155
--aparte-terminal-running	#22c55e
--aparte-terminal-output-bg	#0f172a
--aparte-terminal-output-text	#94a3b8
--aparte-terminal-copy-btn-size	26px
--aparte-terminal-font-size	13px
--aparte-terminal-output-max-height	200px

Progress

Variable	Default	Notes
--aparte-progress-bar-bg	var(--aparte-surface-3)
--aparte-progress-bar-fill	var(--aparte-primary)
--aparte-progress-label	var(--aparte-text)

Scroll-to-bottom button

Variable	Default	Notes
--aparte-scroll-btn-size	36px
--aparte-scroll-btn-bg	var(--aparte-surface-1)
--aparte-scroll-btn-color	var(--aparte-text)
--aparte-scroll-btn-border	var(--aparte-border)
--aparte-scroll-btn-shadow	0 2px 8px rgba(0, 0, 0, 0.12)
--aparte-scroll-btn-hover-bg	var(--aparte-surface-2)

File Tree

Variable	Default	Notes
--aparte-file-tree-bg	var(--aparte-surface-1)
--aparte-file-tree-border	var(--aparte-border)
--aparte-file-tree-header-bg	var(--aparte-surface-2)
--aparte-file-tree-hover	var(--aparte-surface-2)
--aparte-file-tree-title	var(--aparte-text-muted)	Git-status file colours reuse the semantic status tokens by default.
--aparte-file-status-added	var(--aparte-success)
--aparte-file-status-modified	var(--aparte-info)
--aparte-file-status-deleted	var(--aparte-error)

Error segment

Variable	Default	Notes
--aparte-error-bg	#fef2f2
--aparte-error-border	#fecaca
--aparte-error-solid	#dc2626
--aparte-error-text	#991b1b
--aparte-error-title	#7f1d1d
--aparte-error-icon-size	20px
--aparte-error-rail-width	4px

Prose (segment-content)

Variable	Default	Notes
--aparte-prose-p-margin	0.4em 0
--aparte-prose-h1-size	1.4em
--aparte-prose-h2-size	1.25em
--aparte-prose-h3-size	1.1em
--aparte-prose-list-indent	1.5em
--aparte-prose-list-margin	0.4em 0
--aparte-prose-li-margin	0.15em 0
--aparte-prose-blockquote-border	var(--aparte-border)
--aparte-prose-blockquote-border-width	3px
--aparte-prose-code-bg	var(--aparte-surface-2)

Viewport

Variable	Default	Notes
--aparte-viewport-padding	16px

Content

Variable	Default	Notes
--aparte-content-line-height	var(--aparte-line-height-loose, 1.7)
--aparte-cursor-color	var(--aparte-primary)

Status

Variable	Default	Notes
--aparte-status-font-size	13px

Input (composer)

Variable	Default	Notes
--aparte-input-font-size	14px
--aparte-input-line-height	var(--aparte-line-height-normal, 1.5)
--aparte-input-padding-x	12px
--aparte-input-padding-y	10px

Conversation List

Variable	Default	Notes
--aparte-conv-list-gap	2px
--aparte-conv-item-padding	7px 10px
--aparte-conv-item-radius	var(--aparte-radius-md)
--aparte-conv-item-color	var(--aparte-text-muted)
--aparte-conv-item-color-active	var(--aparte-text)
--aparte-conv-item-bg-hover	var(--aparte-surface-3)
--aparte-conv-item-bg-active	var(--aparte-surface-3)
--aparte-conv-item-font-size	0.8125rem
--aparte-conv-item-font-weight-active	var(--aparte-font-weight-medium, 500)
--aparte-conv-delete-color	var(--aparte-text-muted)
--aparte-conv-delete-bg-hover	var(--aparte-error)
--aparte-conv-delete-color-hover	var(--aparte-text-inverse)
--aparte-conv-delete-radius	var(--aparte-radius-sm)
--aparte-conv-item-gap	6px
--aparte-conv-action-btn-size	20px