Theming

The Agent SDK supports visual customization via the theme prop on AgentProvider. All options are optional — the defaults produce a polished dark-mode UI out of the box.

<AgentProvider
  theme={{
    accentColor: '#2563eb',
    colorScheme: 'dark',
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: 14,
    radius: 'soft',
  }}
  {...otherProps}
>

Options

Field	Type	Default	Description
accentColor	string	'#9333ea'	Primary color (hex). Used for buttons, links, highlights. A 10-shade palette is generated automatically.
colorScheme	'dark' | 'light' | 'auto'	'dark'	Color scheme. 'auto' follows the user's system preference.
fontFamily	string	'Inter, system-ui, sans-serif'	Font family for the entire chat UI.
fontSize	number	14	Base font size in pixels. All text sizes scale proportionally.
radius	'sharp' | 'soft' | 'round' | 'pill'	'soft'	Border radius style for buttons, cards, input, and message bubbles.

Accent color

Pass a single hex color and the SDK generates a full palette:

theme={{ accentColor: '#059669' }}

The accent color is used for primary buttons, links in markdown, bold/strong text highlights, badges, and active states.

Color scheme

theme={{ colorScheme: 'light' }}

Value	Behavior
'dark'	Dark mode (default)
'light'	Light mode
'auto'	Follows the user's system preference

Toggling at runtime

Use useAgentColorScheme() inside AgentProvider to let users switch:

import { useAgentColorScheme } from '@kapaai/agent-react';

const { colorScheme, toggleColorScheme, setColorScheme } = useAgentColorScheme();

Field	Type	Description
colorScheme	'dark' | 'light'	Current resolved color scheme.
setColorScheme	(scheme) => void	Set explicitly to 'dark' or 'light'.
toggleColorScheme	() => void	Toggle between dark and light.

Typography

Font family

theme={{ fontFamily: 'JetBrains Mono, monospace' }}

Any CSS font stack works. The font applies to the entire chat — header, messages, input, tool cards, and footer.

Font size

theme={{ fontSize: 16 }}

The base size in pixels. All text sizes scale proportionally (smaller text like labels stays smaller, larger text like headings stays larger).

Border radius

theme={{ radius: 'pill' }}

Value	Style
'sharp'	No rounding — squared edges
'soft'	Moderate rounding (default)
'round'	More rounded
'pill'	Fully rounded / pill-shaped

The radius applies consistently to buttons, input field, message bubbles, tool cards, example prompt buttons, and badges.