主題

透過 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	主要互動元素色彩
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	模板元素樣式

顏色會擴散到整個對話介面（0.3.x）

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

• chatbot.primaryComponent.mainColor → --asg-color-primary（＋自動推導的深色 hover）
• chatbot.backgroundColor → --asg-color-bg / --asg-color-surface
• chatbot.borderColor → --asg-color-border / --asg-color-divider

只有在提供具體色碼（#rrggbb，或非 var() 的邊框色）時才會注入，否則沿用內建預設。