Styling your own Web Component

Theme & Core Colors

• --bbc-color-primary → Used in buttons, links, texts and more to hightlight and emphasize.

• --bbc-color-secondary → Used for hints, descriptions and subtitles.

• --bbc-color-theme → Used as the app-wide default background.

• --bbc-icon-hover-color → Used for icon color on hover.

• --bbc-button-hover-bg-color → Used for button background on hover.

• --bbc-button-hover-text-color → Used for button text color on hover.

---

Sidebar (Navigation)

• --bbc-sidebar-bg-color → Sidebar background color

• --bbc-sidebar-text-color → Sidebar text color

• --bbc-sidebar-font-size → Sidebar font size

• --bbc-sidebar-font-weight → Sidebar font weight

• --bbc-sidebar-font-family → Sidebar font family

Sidebar active item

• --bbc-sidebar-active-item-bg-color → Active-item background in sidebar

---

Top Bar

Top bar

You can hide the top bar using the hideTopbar parameter.

• --bbc-top-bar-text-color → Top bar text color

• --bbc-top-bar-bg-color → Top bar background color

• --bbc-top-bar-font-family → Top bar font family

• --bbc-top-bar-font-weight → Top bar font weight

• --bbc-top-bar-font-size → Top bar font size

Message Citation

Message citation

• --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

• --bbc-msg-timestamp-color: #007b5e; — sets the color for all message timestamps

---

Desktop Messages

• Bot message

  • --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 message

  • --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

---

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

  • --bbc-document-chunk-border-color: #007b5e; — controls the left‑border color of document chunks

---

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;
        --bbc-msg-timestamp-color: #007b5e;

        /* Document */
        --bbc-document-title-text-color: #313131;
        --bbc-document-chunk-bg-color: #f2f2f2;
        --bbc-document-chunk-border-color: #007b5e;

        /* 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;
    "
    layout="compact"
    width="100%"
    height="90vh"
    hideTopbar
    ...
></blockbrain-main>