REFERENCE
SDK 範例
@asgard-js/core 與 @asgard-js/react 的用法與可以直接操作的範例。
主題
透過 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 結構
層級 欄位 說明 chatbotbackgroundColor,borderColor,borderRadius外框樣式 chatbotcontentMaxWidth,width,height尺寸控制 chatbotmainColor,secondaryColor,inactiveColor全域色彩 chatbot.primaryComponentmainColor,secondaryColor,onMainColor主要互動元素色彩 chatbot.headerstyle,title.style,actionButton.styleHeader 樣式 chatbot.bodystyle訊息區域樣式 chatbot.footerstyle,textArea.style,submitButton.style,speechInputButton.style輸入區域樣式 botMessagecolor,backgroundColor,linkColor,quickReplyBackgroundColorBot 訊息氣泡 userMessagecolor,backgroundColor使用者訊息氣泡 templatequickReplies.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-dividerchatbot.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）用數值運算加深／變亮，其他值一律用 CSScolor-mix()推導。既有的色碼寫法完全不受影響。onMainColor：疊在強調色上的前景primaryComponent.onMainColor是疊在mainColor之上的內容顏色——卡片與輪播的按鈕文字、 附件圖示、輸入區的送出圖示。它預設等於
secondaryColor，而後者同時也是主要文字層（header 標題、輸入文字）。這兩者只有在mainColor偏暗時才會一致：如果你的品牌強調色是亮色（例如金色），強調色上需要深色文字， 但其他地方需要亮色文字——一個欄位無法同時滿足。mainColor是亮色時，請設定onMainColor。const goldTheme = {
chatbot: {
primaryComponent: {
mainColor: "#e8c547", // 亮色強調
secondaryColor: "#f5f5f5", // 一般文字：亮
onMainColor: "#1a1a1a", // 疊在金色上的文字：深
},
},
};JSON 與錯誤細節的 CSS 變數
有兩處是程式碼配色，不跟著品牌色走，所以另外開了覆寫點：工具呼叫展開後的 JSON、以及 錯誤泡泡的 details 展開。預設是一組深色主題常見的 語法配色，在任意父層覆寫即可：
.my-chatbot-wrapper {
--asgard-json-token-key: #7dd3fc;
--asgard-json-token-string: #fca5a5;
--asgard-error-details-bg: rgba(0, 0, 0, 0.4);
}CSS 變數 用途 預設值 --asgard-json-token-keyJSON 的 key #9cdcfe--asgard-json-token-string字串值 #ce9178--asgard-json-token-number數值 #b5cea8--asgard-json-token-booleantrue/false/null#569cd6--asgard-json-token-punctuation括號、逗號、冒號 #d4d4d4--asgard-error-toggle「顯示更多」切換鈕文字 rgb(200, 200, 200)--asgard-error-toggle-hover切換鈕 hover 時的文字 white--asgard-error-details-bg展開區背景 rgba(0, 0, 0, 0.25)--asgard-error-details-label展開區的「詳細資訊」標籤 rgb(150, 150, 150)--asgard-error-details-text展開區的 JSON 文字 rgb(220, 220, 220)在 Chatbot 之外套用主題
自行擺放的面板（
<TaskList>、<FileExplorerPanel>等）不在<Chatbot>的 DOM 子樹裡， 拿不到上面這些 token。用AsgardThemeScope把同一組主題重新掛上去。