主題

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

預設主題

目前主題設定

{}

聊天機器人載入中…

提示

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

程式範例

import { Chatbot, ChatbotTheme } from "@asgard-js/react";

const myTheme: ChatbotTheme = {
  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	模板元素樣式