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} />;

Theme Structure

Level	Fields	Description
chatbot	backgroundColor, borderColor, borderRadius	Outer frame styles
chatbot	contentMaxWidth, width, height	Size controls
chatbot	mainColor, secondaryColor, inactiveColor	Global colors
chatbot.primaryComponent	mainColor, secondaryColor	Primary interactive element colors
chatbot.header	style, title.style, actionButton.style	Header styles
chatbot.body	style	Message area styles
chatbot.footer	style, textArea.style, submitButton.style, speechInputButton.style	Input area styles
botMessage	color, backgroundColor, linkColor, quickReplyBackgroundColor	Bot message bubble
userMessage	color, backgroundColor	User message bubble
template	quickReplies.style, references.style, time.style	Template element styles