Skip to main content
Customize the agent appearance using CSS custom properties to match your application’s design.

​
How Theming Works

The agent renders inside Shadow DOM, so normal CSS selectors can’t reach it. Instead, set CSS custom properties (variables) on the “ element.

​
Quick Theme

Add CSS rules targeting the custom element: 
char {
  --char-color-primary: #0f766e;
  --char-color-primary-foreground: #ffffff;
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
}

​
Common Customizations

​
Brand Colors

Match your primary action color: 
char {
  --char-color-primary: #7c3aed;        /* Your brand color */
  --char-color-primary-foreground: #fff; /* Text on primary */
}

​
Border Radius

Control the roundness of UI elements: 
char {
  --char-radius: 0.5rem;  /* Slightly rounded */
  /* --char-radius: 0;    Sharp corners */
  /* --char-radius: 1rem; More rounded */
}

​
Message Bubbles

Customize user and assistant message appearance: 
char {
  --char-user-bubble-bg: #7c3aed;
  --char-assistant-bubble-bg: #f3f4f6;
}

​
Typography

Use your application’s font: 
char {
  --char-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

​
Dark Mode

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

/* Dark mode */
html.dark char {
  --char-color-background: #0b1220;
  --char-color-foreground: #e2e8f0;
  --char-color-muted: #111827;
  --char-color-border: #1f2937;
}
Adjust the selector (html.dark, [data-theme="dark"], etc.) to match how your app handles dark mode.

​
Complete Example

Here’s a full theme matching a teal brand: 
char {
  /* Brand */
  --char-color-primary: #0f766e;
  --char-color-primary-foreground: #ffffff;

  /* Surfaces */
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
  --char-color-muted: #f1f5f9;
  --char-color-border: #e2e8f0;

  /* Messages */
  --char-user-bubble-bg: #0f766e;
  --char-assistant-bubble-bg: #f1f5f9;

  /* Shape & Typography */
  --char-radius: 0.75rem;
  --char-font-sans: "Inter", system-ui, sans-serif;
}

​
Reference

For the complete list of CSS variables, see the CSS Variables Reference.