Skip to main content

Theming

The chat reads from a flat token tree: colors, typography, radii. Pass a theme prop with the tokens you want to override; everything else falls through to the SDK defaults (light or dark, picked by useColorScheme()).

This page covers the quick-reference patterns. See SDK → Theming for the complete token table and provider details.

Override a single token​

<AppilotsChat
  theme={{
    colors: {
      primary: '#0070f3',
    },
  }}
/>

You can override only the keys you care about. The base palette stays intact for the rest.

Theme from the dashboard​

A theme configured in the project's Personalização tab applies automatically when no theme prop is passed — the SDK fetches it on provider mount. The theme prop wins as a whole when present: the dashboard tokens are not merged underneath it, so an app that themes in code keeps exactly what it wrote. The dashboard's Modo claro/escuro plays the same role for themeMode (an explicit themeMode prop wins). See Overview for the precedence rules and the opt-out.

Dark mode​

<AppilotsChat themeMode="auto" />   // follows the device (default)
<AppilotsChat themeMode="dark" />   // forced
<AppilotsChat themeMode="light" />  // forced

The bundled dark theme is hand-tuned to mirror the light defaults (same hue family, inverted background/text). Token overrides apply on top of whichever base is active.

Tailwind bridge​

Already have a Tailwind config? appilotsTheme.fromTailwind() maps it to a theme partial. Mapping is best-effort — only fields with a clear semantic match get pulled across; the rest stay on Appilots defaults.

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config';
import { appilotsTheme, AppilotsChat } from '@appilots/sdk';

const theme = appilotsTheme.fromTailwind(resolveConfig(tailwindConfig));

<AppilotsChat theme={theme} />;

The bridge expects the resolved (post-resolveConfig) shape — pass your raw config through tailwindcss/resolveConfig first so plugin expansions and shade defaults are filled in.

Building custom UI on the same tokens​

Want a custom component (e.g. a settings button) to match the chat's colors and radii? See SDK → Theming for useAppilotsTheme() and wrapping children in <AppilotsThemeProvider>.

Last updated on