主題

透過 theme prop 客製化聊天機器人的外觀。預設主題中的每一個顏色、 間距、圓角都可以被覆寫。

預設主題

目前主題設定

{}

聊天機器人載入中…

提示

試試看 Crazy preset，一次看到所有主題 slot 的效果。

程式範例

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 結構

層級	欄位	說明
chatbot	backgroundColor, borderColor, borderRadius	外框樣式
chatbot	contentMaxWidth, width, height	尺寸控制
chatbot	mainColor, secondaryColor, inactiveColor	全域色彩
chatbot.primaryComponent	mainColor, secondaryColor, onMainColor	主要互動元素色彩
chatbot.header	style, title.style, actionButton.style	Header 樣式
chatbot.body	style	訊息區域樣式
chatbot.footer	style, textArea.style, submitButton.style, speechInputButton.style	輸入區域樣式
botMessage	color, backgroundColor, linkColor, quickReplyBackgroundColor	Bot 訊息氣泡
userMessage	color, backgroundColor	使用者訊息氣泡
template	quickReplies.style, references.style, time.style	模板元素樣式

顏色會擴散到整個對話介面

以下這幾個 chatbot 顏色會連動到 SDK 的 --asg-color-* design token，因此只要設定它們，連新版介面（執行指示器、輸入框、對話標題列、工具呼叫群組、思考區塊、任務／子代理面板）也會一起套色：

主題欄位	對應 token
chatbot.primaryComponent.mainColor	--asg-color-primary（＋自動推導的深色 hover）
chatbot.backgroundColor	--asg-color-bg / --asg-color-surface（surface 亮一階）
chatbot.borderColor	--asg-color-border / --asg-color-divider
chatbot.inactiveColor	--asg-color-text-secondary / --asg-color-action-inactive（次要文字與圖示層：時間戳、placeholder、header 圖示）
chatbot.primaryComponent.secondaryColor	--asg-color-text-primary（主要文字層）

只要值是非空字串就會注入；留空才會沿用內建預設。

可以直接接你自己的 design token

主題欄位不限於色碼。var()、oklch()、rgb()、color-mix() 都會原樣傳下去，所以可以把 聊天介面直接接到你既有的設計系統：

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

差別只在推導色怎麼算：六位色碼（#rrggbb）用數值運算加深／變亮，其他值一律用 CSS color-mix() 推導。既有的色碼寫法完全不受影響。

onMainColor：疊在強調色上的前景

primaryComponent.onMainColor 是疊在 mainColor 之上的內容顏色——卡片與輪播的按鈕文字、 附件圖示、輸入區的送出圖示。

它預設等於 secondaryColor，而後者同時也是主要文字層（header 標題、輸入文字）。這兩者只有在 mainColor 偏暗時才會一致：如果你的品牌強調色是亮色（例如金色），強調色上需要深色文字， 但其他地方需要亮色文字——一個欄位無法同時滿足。

mainColor 是亮色時，請設定 onMainColor。

const goldTheme = {
  chatbot: {
    primaryComponent: {
      mainColor: "#e8c547",    // 亮色強調
      secondaryColor: "#f5f5f5", // 一般文字：亮
      onMainColor: "#1a1a1a",  // 疊在金色上的文字：深
    },
  },
};

在 Chatbot 之外套用主題

自行擺放的面板（<TaskList>、<FileExplorerPanel> 等）不在 <Chatbot> 的 DOM 子樹裡， 拿不到上面這些 token。用 AsgardThemeScope 把同一組主題重新掛上去。