# 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)**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FowRQtV2umNi65FZTr46U%2Fimage.png?alt=media&#x26;token=f1c0e2f7-02c7-4f5e-b86f-218e7165988d" alt="" width="316"><figcaption></figcaption></figure>

* `--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

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FdyyKc14iiUe6aB9dvM3c%2Fimage.png?alt=media&#x26;token=caa93edd-81ea-4381-9c8a-46e4c8c24297" alt="" width="314"><figcaption><p>Sidebar active item</p></figcaption></figure>

* `--bbc-sidebar-active-item-bg-color` → Active-item background in sidebar

***

### **Top Bar**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FqCxPJ8VAHbzbnP9yviGO%2Fimage.png?alt=media&#x26;token=b0aac34d-7d3c-448a-b41a-5fc9dbe016dc" alt=""><figcaption><p>Top bar</p></figcaption></figure>

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

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FgIBZE1ApT1o1sQ7XZUmL%2Fimage.png?alt=media&#x26;token=c370e743-4741-4b41-a4be-4af607bc14e1" alt=""><figcaption><p>Message citation</p></figcaption></figure>

* `--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**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FnRPOhM8J6rYUYXZIkWQ2%2Fimage%20(5).png?alt=media&#x26;token=5a0c69f9-5c4e-459b-adff-0aee6fe48d6f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FGVEJfE6bFInFTIdu9Oz5%2Fimage%20(4).png?alt=media&#x26;token=267d16c7-9eab-45e4-a61b-f0ee922f77f5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2F7NfoQgN41lOI8eTS4TCq%2Fimage.png?alt=media&#x26;token=e65e45e7-3f5d-4ce4-94db-898fb14cdf0f" alt=""><figcaption></figcaption></figure>

* **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**&#x20;

```html
<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>

```

&#x20;     &#x20;

<br>