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

# Custom Styling

> Theme the Char agent with CSS variables for brand colors, typography, and dark mode

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:

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

```css theme={null}
char {
  --char-color-primary: #7c3aed;        /* Your brand color */
  --char-color-primary-foreground: #fff; /* Text on primary */
}
```

### Border Radius

Control the roundness of UI elements:

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

```css theme={null}
char {
  --char-user-bubble-bg: #7c3aed;
  --char-assistant-bubble-bg: #f3f4f6;
}
```

### Typography

Use your application's font:

```css theme={null}
char {
  --char-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}
```

## Dark Mode

Scope variables to your existing dark mode selector:

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

```css theme={null}
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](/reference/css-variables).

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