# Theme-Variablen in der Konfiguration verwenden

In der Theme-Konfiguration wirst du gelegentlich Variablen in Farbfeldern finden. Dies vereinheitlicht das Farbbild deiner Storefront und erleichtert dir das Farbbild an deine Wünsche anzupassen.

Für Variablen gibt es zwei relevante Schreibweisen:

1. **Shopware Variablen:**
   * $**sw**-color-brand-primary = Primärfarbe in der Storefront
   * $**sw**-color-brand-secondary = Sekundärfarbe in der Storefront
   * $**sw**-text-color = Textfarbe in der Storefront
   * $**sw**-background-color = Hintergrundfarbe in der Storefront
   * usw.
2. **ThemeWare® Variablen:**
   * $**twt**-color-brand-primary-light = Eine helle Nuance der Primärfarbe
   * $**twt**-color-brand-primary-dark = Eine dunklere Nuance der Primärfarbe
   * $**twt**-color-brand-secondary-light = Eine helle Nuance der Sekundärfarbe
   * $**twt**-color-brand-secondary-dark = Eine dunklere Nuance der Sekundärfarbe
   * usw.

## Vorwort

Derzeit ist die Nutzung von Variablen in Themes mit Vorsicht zu genießen! In Shopware 6 müssen Variablen vor der Nutzung in einem Konfigurationsfeld initialisiert worden sein. Eine Variable kann also nicht in einem Konfigurationsfeld vor dem eigentlichen Konfigurationsfeld der Theme-Variable verwendet werden.

Dies wirkt sich besonders auf Theme-Duplikate aus, da diese – warum auch immer – derzeit nicht die vom Entwickler vorgesehene Reihenfolge für Konfigurationsfelder erhalten.

{% hint style="info" %}
**Hinweis**: Bei allen Konfigurationsfeldern gilt, dass du Variablen (z.B. `$sw-color-brand-secondary`) nur bedingt nutzen kannst. Technisch gesehen muss die entsprechende Variable vor Nutzung in einem anderen Feld bereits initiiert worden sein.

Erhältst du einen Kompilierungsfehler, nutze bitte einen validen Farbwert anstatt der Variable.
{% endhint %}

## Variablen finden

Die Variable für jedes Konfigurationsfeld findest Du schnell über unseren [ThemeWare® Config-Finder](https://config.themeware.design). Gib dort einfach die Bezeichnung eines Feldes und ggf. den Bereich in dem du suchen möchtest ein (z.B. "[typografie headline textfarbe](https://config.themeware.design/?searchtext=typografie%20headline%20textfarbe)") und schon findest du das passende Konfigurationsfeld bzw. passende Konfigurationsfelder.

Die Variablen sind als "Technischer Name" für jedes Feld aufgelistet.

Beim kompilieren des Themes werden die Variablen durch den im entsprechenden Konfigurationsfeld hinterlegten Wert ersetzt.

## Variablen verwenden

Variablen kannst du in verschiedenen Konfigurationsfeldern nutzen.

**Einschränkung**: In Shopware Standard-Konfigurationsfeldern lassen sich aufgrund der Theme-Vererbung keine Theme-Variablen ($twt...) nutzen.

Sind Konfigurationsfelder grundsätzlich nicht geeignet, findest du im Hilfe-Text einen entsprechenden Hinweis.

![](/files/7qUldObMRqYVRnOMK8mY)

> **Tipp**: Am besten speicherst und kompilierst nach jeder verwendeten Theme-Variable einmal das Theme um zu prüfen ob die Variable im entsprechenden Konfigurationsfeld möglich ist.
>
> Falls dies nicht möglich ist, erhältst du den nachfolgenden Fehler.

## Fehler "Undefined variable"

Dieser Fehler tritt auf, wenn Shopware eine Variable nicht "bekannt" ist. Dies würde bei der Arbeit mit Theme-Variablen auftreten wenn (wie oben beschrieben) die Variable vor der Nutzung nicht bereits initialisiert wurde.

Ändere in diesem Fall die Variable wieder in einen HEX- oder RGB-/RGBA-Wert zurück.


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/konfiguration/theme-variablen-in-der-konfiguration-verwenden.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.