Package Reference

Themes & locale

Brand accent

Brand accent color is applied at runtime as CSS variables (--chat-theme and related tokens). Pass themeColor once on ChatMain. Make sure the matching :root tokens exist in your global CSS (see Project Setup).

tsx

<ChatMain {...chatConfig} themeColor="#7c3aed" />

Locale and clock

Locale, timezone, and clock format control how timestamps render across slots. Prefer these props over ad-hoc Intl calls inside custom components so formatting stays consistent.

tsx

<ChatMain
  {...chatConfig}
  locale="en-GB"
  timeZone="Europe/London"
  hour12={false}
  showDateTimeSettings={false}
  onDateTimePreferencesChange={(prefs) => console.log(prefs)}
/>

Light and dark mode

Choose controlled mode when your host app (admin template, design system) already owns theme state. Leave the built-in toggle visible when chat should manage its own mode.

Pattern	Props
Your app controls the theme (e.g. admin template)	colorMode + onColorModeChange + showColorModeToggle={false}
Chat manages its own theme	defaultColorMode="light" (built-in toggle shown)
Start in dark mode	defaultColorMode="dark"