Styling your own Web Component
Theme & Core Colors
--bbc-color-primary
β Primary brand/accent color--bbc-color-hover
β Hover/highlight color--bbc-color-theme
β Default overall background
Sidebar (Navigation)
--bbc-color-sidebar-bg
β Sidebar/nav background--bbc-color-sidebar-active-item-bg
β Active-item background in sidebar
Citation Block
--bbc-msg-citation-text-color
β Citation text color--bbc-msg-citation-bg-color
β Citation background color--bbc-msg-citation-font-family
β Citation font family--bbc-msg-citation-font-size
β Citation font size--bbc-msg-citation-font-weight
β Citation font weight--bbc-msg-citation-py
β Citation vertical padding--bbc-msg-citation-px
β Citation horizontal padding
Desktop Messages
Bot
--bbc-bot-msg-bg-color
β Bot-message background--bbc-bot-msg-text-color
β Bot-message text color--bbc-bot-msg-font-family
β Bot font family--bbc-bot-msg-font-size
β Bot font size--bbc-bot-msg-font-weight
β Bot font weight--bbc-bot-msg-py
β Bot vertical padding--bbc-bot-msg-px
β Bot horizontal padding
User
--bbc-user-msg-bg-color
β User-message background--bbc-user-msg-text-color
β User-message text color--bbc-user-msg-font-family
β User font family--bbc-user-msg-font-size
β User font size--bbc-user-msg-font-weight
β User font weight--bbc-user-msg-py
β User vertical padding--bbc-user-msg-px
β User horizontal padding
Mobile Messages
Bot
--bbc-bot-msg-sm-bg-color
β Mobile bot background--bbc-bot-msg-sm-text-color
β Mobile bot text color--bbc-bot-msg-sm-font-family
β Mobile bot font family--bbc-bot-msg-sm-font-size
β Mobile bot font size--bbc-bot-msg-sm-font-weight
β Mobile bot font weight--bbc-bot-msg-sm-py
β Mobile bot vertical padding--bbc-bot-msg-sm-px
β Mobile bot horizontal padding
User
--bbc-user-msg-sm-bg-color
β Mobile user background--bbc-user-msg-sm-text-color
β Mobile user text color--bbc-user-msg-sm-font-family
β Mobile user font family--bbc-user-msg-sm-font-size
β Mobile user font size--bbc-user-msg-sm-font-weight
β Mobile user font weight--bbc-user-msg-sm-py
β Mobile user vertical padding--bbc-user-msg-sm-px
β Mobile user horizontal padding
Document Layout
Title
--bbc-document-title-font-size
β Title font size--bbc-document-title-font-weight
β Title font weight--bbc-document-title-text-color
β Title text color
Chunk
--bbc-document-chunk-text-color
β Chunk text color--bbc-document-chunk-bg-color
β Chunk background color
Reference List & Cards
List Title
--bbc-ref-list-title-font-size
β List title font size--bbc-ref-list-title-font-weight
β List title font weight--bbc-ref-list-title-text-color
β List title text color
Card
--bbc-ref-list-card-border-color
β Card border color--bbc-ref-list-card-border-radius
β Card corner radius--bbc-ref-list-card-text-color
β Card text color--bbc-ref-list-card-bg-gradient-start
β Card gradient start--bbc-ref-list-card-bg-gradient-stop
β Card gradient end--bbc-ref-list-card-icon-bg-color
β Card-icon background
Example Usage
<blockbrain-main
style="
/* Theme & Core */
--bbc-color-primary: #007b5e;
--bbc-color-hover: #007b5e;
--bbc-color-theme: #f3f4f6;
/* Sidebar */
--bbc-color-sidebar-bg: #ffffff;
--bbc-color-sidebar-active-item-bg: #f5f9ff;
/* Citation */
--bbc-msg-citation-text-color: #000000;
--bbc-msg-citation-font-weight: bold;
/* Mobile Messages */
--bbc-bot-msg-sm-bg-color: #f2f2f2;
--bbc-user-msg-sm-bg-color: #007b5e;
--bbc-user-msg-sm-text-color: #f2f2f2;
--bbc-user-msg-sm-px: 4px;
--bbc-bot-msg-sm-px: 4px;
/* Document */
--bbc-document-title-text-color: #313131;
--bbc-document-chunk-bg-color: #f2f2f2;
/* Reference List */
--bbc-ref-list-title-text-color: #7f7f7f;
--bbc-ref-list-title-font-weight: 500;
--bbc-ref-list-card-border-color: #d9d9d9;
--bbc-ref-list-card-bg-gradient-start: #f2f2f2;
--bbc-ref-list-card-bg-gradient-stop: #ffffff;
--bbc-ref-list-card-icon-bg-color: #007b5e;
"
clientId="KbotWebCom"
orgId="233513864103202013"
secretKey="β¦"
uid="citation-test"
userUid="tung"
layout="compact"
height="calc(90dvh - 180px)"
hideTopbar
></blockbrain-main>
Last updated