主題

透過 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} />;