Skip to main content
The “ component renders inside Shadow DOM, so external selectors cannot reach its internals. Customize the UI by setting CSS custom properties on the host element.

​
Quick Example

char {
  --char-color-primary: #0f766e;
  --char-color-primary-foreground: #ffffff;
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
}

​
Tier 1: Brand Matching

These are the essential variables for matching your brand:
VariableDescription
--char-color-primaryPrimary action color (send button, links, accents)
--char-color-primary-foregroundText on primary surfaces
--char-color-backgroundMain background color
--char-color-foregroundPrimary text color
--char-radiusBorder radius (e.g., 0.75rem, 0, 1rem)
--char-font-sansSans-serif font stack

​
Tier 2: Deeper Customization

For more granular control over specific elements:
VariableDescription
--char-color-mutedMuted/secondary surface color
--char-color-borderBorders and dividers
--char-user-bubble-bgUser message background
--char-assistant-bubble-bgAssistant message background

​
Dark Mode

Scope variables to your existing dark mode selector: 
/* Light mode (default) */
char {
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
  --char-color-muted: #f1f5f9;
  --char-color-border: #e2e8f0;
}

/* Dark mode */
html.dark char,
[data-theme="dark"] char {
  --char-color-background: #0b1220;
  --char-color-foreground: #e2e8f0;
  --char-color-muted: #111827;
  --char-color-border: #1f2937;
}