> For the complete documentation index, see [llms.txt](https://docs.blockbrain.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blockbrain.ai/for-admins/web-components/styling-your-own-web-component.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.