> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vererbung von Markeneinstellungen

> Erfahren Sie, wie Sie Markeneinstellungen wie Logos und Markenfarben innerhalb eines Designs oder in HubL/HTML- und CSS-Dateien verwenden können. 

Über die [Markeneinstellungen](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors) können Benutzer festlegen, dass die Markenfarben, -Logos und -Favicons des Unternehmens überall in HubSpot verwendet werden. Dadurch können Sie mit Token in der `fields.json`-Datei eines Designs und in HTML/HubL- und CSS-Dateien auf diese Markeneinstellungen zugreifen. Sie können auch auf Markenfarben innerhalb der `fields.json`-Datei eines Moduls zugreifen.

Nach dem Hinzufügen dieser Token in einer `fields.json`-Datei können Content-Autoren ihre Werte im Editor für Designeinstellungen bearbeiten. Wenn Sie diese Token in einem HTML-, HubL- oder CSS-Code hinzufügen, werden die Werte fest kodiert und können im Seiten-Editor von Content-Autoren nicht geändert werden.

Im Folgenden erfahren Sie mehr über die verfügbaren Variablen für Markeneinstellungen sowie Beispiele für die Umsetzung.

## Variablen für Markeneinstellungen

Im Folgenden finden Sie eine Liste der Optionen, auf die Sie in den Markeneinstellungen innerhalb des Werts des `property_value_paths`-Objekts oder in HTML/HubL- und CSS-Dateien zugreifen können.

### Farben

Auf Markenfarben kann sowohl innerhalb der [fields.json](#fields-json-color)-Datei eines Designs oder Moduls als auch innerhalb von HTML/HubL- und CSS-Dateien mithilfe der folgenden HubL-Token zugegriffen werden:

* **Primär:**

  * `{{brand_settings.primaryColor}}`
  * `{{brand_settings.colors[0]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-primary.png" alt="brand-colors-primary" />
</Frame>

* **Sekundär:** `{{brand_settings.secondaryColor}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-secondary.png" alt="brand-colors-secondary" />
</Frame>

* **Akzentfarben:**

  * `{{brand_settings.accentColor1}}`
  * `{{brand_settings.accentColor2}}`
  * `{{brand_settings.accentColor3}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-accent.png" alt="brand-colors-accent" />
</Frame>

* **Weitere Farben:**

  * `{{brand_settings.colors[1]}}`
  * `{{brand_settings.colors[2]}}`
  * `{{brand_settings.colors[3]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-additional.png" alt="brand-colors-additional" />
</Frame>

Um direkt auf den Hex-Code einer Farbe zuzugreifen, berücksichtigen Sie einen `hex`-Filter im Token. Zum Beispiel: `{{brand_settings.primaryColor.hex}}`.

Um die Farben von Markeneinstellungen in die `fields.json`-Datei eines Designs oder Moduls aufzunehmen, verwenden Sie das folgende Format:

```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
```

<Warning>
  Es kann vorkommen, dass Acounts möglicherweise keine zusätzlichen Farben in ihren Markeneinstellungen konfiguriert haben. Wenn Ihr Code auf eine vererbte Farbe verweist, die in den Markeneinstellungen nicht vorhanden ist, wird die folgende Fallback-Logik verwendet:

  * `secondaryColor` greift auf die erste zusätzliche Farbe (`colors[1]`) zurück.
  * `accentColor1` greift auf die zweite zusätzliche Farbe (`colors[2]`) zurück.
  * `accentColor2` greift auf die dritte zusätzliche Farbe (`colors[3]`) zurück.
  * `accentColor3` greift auf die vierte zusätzliche Farbe (`colors[4]`) zurück.
  * Zusätzliche Farben (z. B. `colors[3]`) greifen auf den `default`-Wert zurück. Wenn keine Standardfarbe für die Eigenschaft festgelegt wurde, wird `primaryColor` verwendet.
</Warning>

### Logos

Auf Markenlogos kann in der `fields.json`-Datei in einem Modul sowie in HTML/HubL- und CSS-Dateien zugegriffen werden.

Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:

* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-logo0.png" alt="brand-settings-logo0" />
</Frame>

Alle zusätzlichen Logos können mithilfe von `{{brand_settings.logos[1-19]}}` aufgerufen werden.

Darüber hinaus können Sie auf die folgenden Logo-Attribute zugreifen:

* **Logo-URL:** `{{brand_settings.primaryLogo.link}}`
* **Logo-ALT-Text:** `{{brand_settings.primaryLogo.alt}}`
* **Logo-Höhe:** `{{brand_settings.primaryLogo.height}}`
* **Logo-Breite:** `{{brand_settings.primaryLogo.width}}`
* **Link zum Bild des Logos:** `{{brand_settings.primaryLogo.src}}`

### Favicons

Auf Marken-Favicons kann nur innerhalb von HTML/HubL- und CSS-Dateien zugegriffen werden.

Sie können die folgenden Token verwenden, um auf das primäre Logo zuzugreifen, das in den Markeneinstellungen festgelegt wurde:

* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-favicon0.png" alt="brand-settings-favicon0" />
</Frame>

Alle zusätzlichen Favicons können mithilfe von `{{brand_settings.favicons[1-19]}}` aufgerufen werden.

Sie können direkt auf die URL des Logos zugreifen, indem Sie einen `src`-Filter berücksichtigen. Zum Beispiel: `{{brand_settings.primaryFavicon.src}}`.