> ## 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.

# CSS Variables

> Complete CSS custom properties reference for theming the Char agent

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

```css theme={null}
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:

| Variable                          | Description                                        |
| --------------------------------- | -------------------------------------------------- |
| `--char-color-primary`            | Primary action color (send button, links, accents) |
| `--char-color-primary-foreground` | Text on primary surfaces                           |
| `--char-color-background`         | Main background color                              |
| `--char-color-foreground`         | Primary text color                                 |
| `--char-radius`                   | Border radius (e.g., `0.75rem`, `0`, `1rem`)       |
| `--char-font-sans`                | Sans-serif font stack                              |

## Tier 2: Deeper Customization

For more granular control over specific elements:

| Variable                     | Description                   |
| ---------------------------- | ----------------------------- |
| `--char-color-muted`         | Muted/secondary surface color |
| `--char-color-border`        | Borders and dividers          |
| `--char-user-bubble-bg`      | User message background       |
| `--char-assistant-bubble-bg` | Assistant message background  |

## Dark Mode

Scope variables to your existing dark mode selector:

```css theme={null}
/* 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;
}
```

<Snippet file="support-cta.mdx" />