Theme

Customize the chatbot appearance through the theme prop. Every color, spacing, and radius value in the default theme can be overridden.

Presets

Current Theme Config

{}

Loading chatbot...

tip

Try the Crazy preset to see every theming slot in action at once.

Code Example

import { Chatbot, ChatbotTheme } from "@asgard-js/react";

const myTheme: ChatbotTheme = {
  chatbot: {
    backgroundColor: "#3c1d3b",
    borderColor: "#92ff8c",
    primaryComponent: {
      mainColor: "#ff0000",
      secondaryColor: "#aba400",
    },
  },
  botMessage: {
    color: "#00f0ff",
    backgroundColor: "#ff7a00",
  },
  userMessage: {
    color: "#522801",
    backgroundColor: "#060081",
  },
};

<Chatbot theme={myTheme} {...rest} />;