# 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="/files/24d9a3a433890d6403b0cf9e2c1d57a5520ddb7b" 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="/files/d0933ae0652c0dcfae69b96ff43192af5c0a9fe6" 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="/files/a8dd2f41918c7be09c0608cefcd96d875ce76971" 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="/files/bb9f3d7c7a18aeb7e130def3e3c7bed039be82db" 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="/files/437d332cceaeb1868e2c59bd30b779c8e18f78e0" 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="/files/4ba270be97acbf42cc3aad0471f9541e810beb09" 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="/files/c9d5c5aa4bc869b23ac0e03ba8c6f5b94807afa2" 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: 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.en.theblockbrain.ai/de/fur-administratoren/webkomponenten/styling-ihrer-eigenen-webkomponente.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.