Theming

Customize the appearance of your react-ai-chat chatbot with theme tokens, custom CSS, and light and dark modes.

Introduction

react-ai-chat gives you several ways to customize the chatbot's appearance.

Use themeMode to control the color mode, theme to change the built-in design tokens, and classNames when you need custom CSS for supported elements.

For deeper control over the markup and component structure, use the Generated Chatbot.

Theme mode

Use themeMode to control which color mode the chatbot uses.

<Chatbot themeMode="light" />

<Chatbot themeMode="dark" />

<Chatbot themeMode="auto" />

The available values are:

Value	Behavior
`light`	Always use the light theme
`dark`	Always use the dark theme
`auto`	Follow the user's system color preference

The default is auto.

Make sure the value documented here matches the version of react-ai-chat you are using. The theme mode API is part of the package's public API.

Custom theme

Use the theme prop to customize the chatbot's design tokens.

<Chatbot
  theme={{
    primaryColor: "#2563eb",
    primaryForeground: "#ffffff",
    background: "#ffffff",
    foreground: "#111827",
    mutedBackground: "#f3f4f6",
    mutedForeground: "#6b7280",
    borderColor: "#e5e7eb",
  }}
/>

You only need to provide the values you want to change.

<Chatbot
  theme={{
    primaryColor: "#7c3aed",
  }}
/>

Any omitted values continue using the package defaults.

Theme tokens

The theme object supports the following tokens:

Token	Purpose
`primaryColor`	Primary accent color used by interactive elements
`primaryForeground`	Text color used on primary elements
`background`	Main chatbot background
`foreground`	Main text color
`mutedBackground`	Background used by secondary UI elements
`mutedForeground`	Text color used by secondary UI elements
`borderColor`	Border color used throughout the chatbot

For example:

const theme = {
  primaryColor: "#2563eb",
  primaryForeground: "#ffffff",
  background: "#ffffff",
  foreground: "#111827",
  mutedBackground: "#f3f4f6",
  mutedForeground: "#6b7280",
  borderColor: "#e5e7eb",
};

<Chatbot theme={theme} />;

Light and dark overrides

You can provide different token values for light and dark modes.

<Chatbot
  theme={{
    primaryColor: "#7c3aed",
    primaryForeground: "#ffffff",
    light: {
      background: "#ffffff",
      foreground: "#18181b",
      mutedBackground: "#f4f4f5",
      mutedForeground: "#71717a",
      borderColor: "#e4e4e7",
    },
    dark: {
      background: "#18181b",
      foreground: "#fafafa",
      mutedBackground: "#27272a",
      mutedForeground: "#a1a1aa",
      borderColor: "#3f3f46",
    },
  }}
/>

Top-level values provide the general theme. Values inside light or dark override them for the corresponding mode.

This lets you keep the same brand color while adapting the chatbot's surfaces and text for each mode.

Match your brand

You can use your application's primary brand color as the chatbot accent.

<Chatbot
  theme={{
    primaryColor: "#7c3aed",
    primaryForeground: "#ffffff",
  }}
/>

For a complete light and dark setup:

<Chatbot
  theme={{
    primaryColor: "#7c3aed",
    primaryForeground: "#ffffff",
    light: {
      background: "#ffffff",
      foreground: "#18181b",
      borderColor: "#e4e4e7",
    },
    dark: {
      background: "#18181b",
      foreground: "#fafafa",
      borderColor: "#3f3f46",
    },
  }}
/>

Custom CSS

Use classNames when the built-in theme tokens are not enough.

<Chatbot
  classNames={{
    wrapper: "custom-chatbot",
    trigger: "custom-trigger",
    window: "custom-window",
    header: "custom-header",
  }}
/>

The supported keys are:

Key	Element
`wrapper`	Root chatbot wrapper
`trigger`	Chat trigger button
`window`	Chat window
`header`	Chat window header

You can then define your own CSS:

.custom-window {
  border-radius: 24px;
}

Your classes are applied alongside the package's built-in styles.

Use theme for the chatbot's design tokens. Use classNames when you need CSS-level changes to supported elements.

For complete customization of the component structure, see Generated Chatbot.

Generated chatbot

The generated chatbot gives you the source code and CSS inside your project.

Generate it with:

npx react-ai-chat init

The generated files can then be edited directly.

You can change:

CSS and visual styling
Component markup
Message rendering
Header layout
Input layout
Interaction behavior

The generated chatbot is useful when the ready-made <Chatbot /> does not provide enough control through props.

See Generated Chatbot.

Accessibility

Custom colors should maintain sufficient contrast between text and backgrounds.

For example:

<Chatbot
  theme={{
    primaryColor: "#2563eb",
    primaryForeground: "#ffffff",
  }}
/>

When supporting both light and dark modes, test your custom theme in each mode.

Complete example

import { Chatbot } from "react-ai-chat";
import "react-ai-chat/style.css";

export default function App() {
  return (
    <Chatbot
      title="AI Assistant"
      themeMode="auto"
      theme={{
        primaryColor: "#7c3aed",
        primaryForeground: "#ffffff",
        light: {
          background: "#ffffff",
          foreground: "#18181b",
          mutedBackground: "#f4f4f5",
          mutedForeground: "#71717a",
          borderColor: "#e4e4e7",
        },
        dark: {
          background: "#18181b",
          foreground: "#fafafa",
          mutedBackground: "#27272a",
          mutedForeground: "#a1a1aa",
          borderColor: "#3f3f46",
        },
      }}
    />
  );
}

Introduction

Theme mode

Custom theme

Theme tokens

Light and dark overrides

Match your brand

Custom CSS

Generated chatbot

Accessibility

Complete example

Next steps

Customization

Generated Chatbot

Chatbot API

On this page