> 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/de/for-admins/web-components/styling-your-own-web-component.md).

# Styling Ihrer eigenen Webkomponente

### **Design & Kernfarben**

* `--bbc-color-primary` → Wird in Buttons, Links, Texten und mehr verwendet, um hervorzuheben und zu betonen.
* `--bbc-color-secondary` → Wird für Hinweise, Beschreibungen und Untertitel verwendet.
* `--bbc-color-theme` → Wird als standardmäßiger app-weiter Hintergrund verwendet.
* `--bbc-icon-hover-color` → Wird für die Symbolfarbe beim Hover verwendet.
* `--bbc-button-hover-bg-color` → Wird für den Button-Hintergrund beim Hover verwendet.
* `--bbc-button-hover-text-color` → Wird für die Button-Textfarbe beim Hover verwendet.

***

### **Seitenleiste (Navigation)**

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

* `--bbc-sidebar-bg-color` → Hintergrundfarbe der Seitenleiste
* `--bbc-sidebar-text-color` → Textfarbe der Seitenleiste
* `--bbc-sidebar-font-size` → Schriftgröße der Seitenleiste
* `--bbc-sidebar-font-weight` → Schriftschnitt der Seitenleiste
* `--bbc-sidebar-font-family` → Schriftfamilie der Seitenleiste

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

* `--bbc-sidebar-active-item-bg-color` → Hintergrund des aktiven Elements in der Seitenleiste

***

### **Obere Leiste**

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

Du kannst die obere Leiste mit dem `hideTopbar` Parameter ausblenden.

* `--bbc-top-bar-text-color` → Textfarbe der oberen Leiste
* `--bbc-top-bar-bg-color` → Hintergrundfarbe der oberen Leiste
* `--bbc-top-bar-font-family` → Schriftfamilie der oberen Leiste
* `--bbc-top-bar-font-weight` → Schriftschnitt der oberen Leiste
* `--bbc-top-bar-font-size` → Schriftgröße der oberen Leiste

**Zitat der Nachricht**

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

* `--bbc-msg-citation-text-color` → Textfarbe des Zitats
* `--bbc-msg-citation-bg-color` → Hintergrundfarbe des Zitats
* `--bbc-msg-citation-font-family` → Schriftfamilie des Zitats
* `--bbc-msg-citation-font-size` → Schriftgröße des Zitats
* `--bbc-msg-citation-font-weight` → Schriftschnitt des Zitats
* `--bbc-msg-citation-py` → Vertikaler Innenabstand des Zitats
* `--bbc-msg-citation-px` → Horizontaler Innenabstand des Zitats
* `--bbc-msg-timestamp-color: #007b5e;` — legt die Farbe für *alle Nachrichten-Zeitstempel fest*

***

### **Nachrichten auf dem Desktop**

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

* **Bot-Nachricht**
  * `--bbc-bot-msg-bg-color` → Hintergrund der Bot-Nachricht
  * `--bbc-bot-msg-text-color` → Textfarbe der Bot-Nachricht
  * `--bbc-bot-msg-font-family` → Schriftfamilie des Bots
  * `--bbc-bot-msg-font-size` → Schriftgröße des Bots
  * `--bbc-bot-msg-font-weight` → Schriftschnitt des Bots
  * `--bbc-bot-msg-py` → Vertikaler Innenabstand des Bots
  * `--bbc-bot-msg-px` → Horizontaler Innenabstand des Bots
* **Benutzernachricht**
  * `--bbc-user-msg-bg-color` → Hintergrund der Benutzernachricht
  * `--bbc-user-msg-text-color` → Textfarbe der Benutzernachricht
  * `--bbc-user-msg-font-family` → Schriftfamilie des Benutzers
  * `--bbc-user-msg-font-size` → Schriftgröße des Benutzers
  * `--bbc-user-msg-font-weight` → Schriftschnitt des Benutzers
  * `--bbc-user-msg-py` → Vertikaler Innenabstand des Benutzers
  * `--bbc-user-msg-px` → Horizontaler Innenabstand des Benutzers

***

### Dokumentlayout

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

* **Titel**
  * `--bbc-document-title-font-size` → Schriftgröße des Titels
  * `--bbc-document-title-font-weight` → Schriftschnitt des Titels
  * `--bbc-document-title-text-color` → Textfarbe des Titels
* **Abschnitt**
  * `--bbc-document-chunk-text-color` → Textfarbe des Abschnitts
  * `--bbc-document-chunk-bg-color` → Hintergrundfarbe des Abschnitts
  * `--bbc-document-chunk-border-color: #007b5e;` — steuert die Farbe des linken Rahmens von Dokumentabschnitten

***

### Referenzliste & Karten

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

* **Listentitel**
  * `--bbc-ref-list-title-font-size` → Schriftgröße des Listentitels
  * `--bbc-ref-list-title-font-weight` → Schriftschnitt des Listentitels
  * `--bbc-ref-list-title-text-color` → Textfarbe des Listentitels
* **Karte**
  * `--bbc-ref-list-card-border-color` → Rahmenfarbe der Karte
  * `--bbc-ref-list-card-border-radius` → Eckenradius der Karte
  * `--bbc-ref-list-card-text-color` → Textfarbe der Karte
  * `--bbc-ref-list-card-bg-gradient-start` → Anfang des Kartenverlaufs
  * `--bbc-ref-list-card-bg-gradient-stop` → Ende des Kartenverlaufs
  * `--bbc-ref-list-card-icon-bg-color` → Hintergrund des Karten-Symbols

***

**Beispielverwendung**&#x20;

```html
<blockbrain-main
    style="
        /* Design & Kern */
        --bbc-color-primary: #007b5e;
        --bbc-color-hover: #007b5e;
        --bbc-color-theme: #f3f4f6;

        /* Seitenleiste */
        --bbc-color-sidebar-bg: #ffffff;
        --bbc-color-sidebar-active-item-bg: #f5f9ff;

        /* Zitat */
        --bbc-msg-citation-text-color: #000000;
        --bbc-msg-citation-font-weight: bold;

        /* Mobile Nachrichten */
        --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;

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

        /* Referenzliste */
        --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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.