Customize Theme

Personalize the look and feel of your Chat-in-Bio page.

Theme config properties

Set your theme via the owner profile API or CLI:

Property	Example	What it controls
primary_color	#6366f1	Buttons, links, user chat bubbles, hover states
accent_color	#4f46e5	Hover/active state color (auto-derived from primary if omitted)
background_color	#f8f9fa	Page background
surface_color	#ffffff	Card/panel backgrounds, assistant chat bubbles
text_color	#1a1a1a	Primary text color
font_family	"Georgia, serif"	CSS font-family string
border_radius	12px	Border radius for cards, buttons, inputs

Set via API

curl -X PUT http://localhost:8000/api/admin/owner \
  -H "Authorization: Bearer $ADMIN_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "theme_config": {
      "primary_color": "#e11d48",
      "background_color": "#fef2f2",
      "font_family": "Georgia, serif",
      "border_radius": "16px"
    }
  }'

Set via CLI

chtbio owner set theme_config '{"primary_color": "#e11d48", "border_radius": "16px"}'

Partial updates

Theme config supports partial updates — you only need to send the properties you want to change. Existing properties are preserved:

# First call: sets primary_color and border_radius
chtbio owner set theme_config '{"primary_color": "#e11d48", "border_radius": "16px"}'

# Second call: only changes primary_color, border_radius stays "16px"
chtbio owner set theme_config '{"primary_color": "#2563eb"}'

How theming works

1. The frontend fetches your theme config from GET /api/bio
2. The theme resolver merges your values with defaults (and dark mode overrides)
3. CSS custom properties are injected on the <app-shell> component
4. All child components (chat bubbles, links, inputs) inherit these properties
5. If primary_color is a hex value, the hover color is auto-derived (15% darker)

Dark mode

Dark mode is automatically supported via prefers-color-scheme. The theme toggle in the top-right corner allows visitors to switch manually. Your primary_color and font_family are preserved in both modes — only backgrounds, text, and surfaces adapt.

CSS custom properties reference

CSS Variable	Default (light)	Default (dark)	Controlled by
--cib-primary	#6366f1	(same)	primary_color
--cib-primary-hover	#4f46e5	(same)	accent_color or auto
--cib-bg	#f8f9fa	#0a0a0a	background_color
--cib-surface	#ffffff	#1a1a1a	surface_color
--cib-text	#1a1a1a	#e5e5e5	text_color
--cib-text-secondary	#6b7280	#9ca3af	—
--cib-border	#e5e7eb	#333333	—
--cib-radius	12px	(same)	border_radius
--cib-font	Inter, system-ui	(same)	font_family
--cib-chat-user-bg	#6366f1	(same)	primary_color
--cib-chat-assistant-bg	#f3f4f6	#262626	surface_color