# 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="/files/FP9b0lop7PMMs3j7OVpX" 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="/files/de2obzUSKM0Qam4esl1H" 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="/files/x0iVxDawEGFhVFPiIQsZ" 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="/files/xQnxeosyZEDJUakwy1v0" 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="/files/6iUngAXiKdldLMQtVBoH" 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="/files/i3YmCZUIhwaTYNxgx8Hz" 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="/files/uwvjGCAWXDY9gWxF7LQx" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blockbrain.ai/for-admins/web-components/styling-your-own-web-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.