Documentation Index
Fetch the complete documentation index at: https://docs.usechar.com/llms.txt
Use this file to discover all available pages before exploring further.
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;
}
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.
