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 } from "@asgard-js/react";
import type { AsgardThemeContextValue } from "@asgard-js/react";

const myTheme: Partial<AsgardThemeContextValue> = {
  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

Colors propagate across the whole chat surface (0.3.x)

These three chatbot colors are wired to the SDK's --asg-color-* design tokens, so setting them recolors the newer surfaces too (the running indicator, composer input, channel-title bar, tool-call groups, thinking block, and Task / Subagent panels):

• chatbot.primaryComponent.mainColor → --asg-color-primary (+ a derived darker hover)
• chatbot.backgroundColor → --asg-color-bg / --asg-color-surface
• chatbot.borderColor → --asg-color-border / --asg-color-divider

Tokens are injected only when a concrete color is provided (a #rrggbb hex, or a non-var() border); otherwise the built-in defaults are kept.