Theme

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​

Wire It to Your Own Design Tokens​

Theme fields are not limited to hex. var(), oklch(), rgb() and color-mix() pass through as-is, so the chat can be wired straight into your existing design system:

const myTheme = {
  chatbot: {
    backgroundColor: "var(--my-surface)",
    borderColor: "var(--my-border)",
    primaryComponent: {
      mainColor: "var(--my-brand)",
    },
  },
};

The only difference is how derived shades are computed: a 6-digit hex (#rrggbb) is darkened/lightened arithmetically, anything else derives its shades via CSS color-mix(). Existing hex usage is unaffected.

onMainColor: Foreground on the Accent​

primaryComponent.onMainColor is the color for content sitting on top of mainColor — card and carousel button labels, the attachment icon glyph, and the composer's submit icon.

It defaults to secondaryColor, which is also the primary text tier (header title, input text). Those two only agree while mainColor is dark: if your brand accent is light (a gold, say), the accent needs dark text on it while everything else needs light text — and one field cannot be both.

Set onMainColor when mainColor is light.

const goldTheme = {
  chatbot: {
    primaryComponent: {
      mainColor: "#e8c547",      // light accent
      secondaryColor: "#f5f5f5", // regular text: light
      onMainColor: "#1a1a1a",    // text on the gold: dark
    },
  },
};

The JSON and Error-detail CSS Variables​

Two places are code coloring and deliberately do not follow the brand color, so they get their own override points: the JSON inside an expanded tool call, and the error bubble's details region. The defaults are a familiar dark-theme syntax palette; override them on any ancestor:

.my-chatbot-wrapper {
  --asgard-json-token-key: #7dd3fc;
  --asgard-json-token-string: #fca5a5;
  --asgard-error-details-bg: rgba(0, 0, 0, 0.4);
}

Theming Outside the Chatbot​

Consumer-placed panels (<TaskList>, <FileExplorerPanel> and friends) are not inside <Chatbot>'s DOM subtree and miss all of the tokens above. Use AsgardThemeScope to re-establish the same theme there.