Dark Mode

Scope CSS variables to your dark mode selector.

Pattern

/* Light mode (default) */
char-agent {
  --char-color-background: #ffffff;
  --char-color-foreground: #0f172a;
  --char-color-muted: #f1f5f9;
  --char-color-border: #e2e8f0;
}

/* Dark mode */
html.dark char-agent,
[data-theme="dark"] char-agent {
  --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 your app’s dark mode implementation.

Complete Example

char-agent {
  /* 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;
}

Try it

Add dark mode styles to your CSS. Toggle the dark class on the html element to see the theme change.

CSS Variables

Wrap Existing UI Logic

Files

Preparing Environment

npm install
npm run dev