> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/typografie-und-farben/theme-farben.md).

# Theme-Farben

### Farben

Im Reiter Farben findest Du die globalen Farbeinstellungen des Themes. Die **Primärfarbe (1)** und **Sekundärfarbe (2)** sind die Hauptfarben des Shops.

{% hint style="info" %}
Die **Primär- und Sekundärfarben** sollten niemals `transparent` und in der Regel nicht `#ffffff` (Weiß) sein, da diese Farben auch als Vordergrundfarbe genutzt werden. 

Stelle daher immer sicher, dass diese Farben einen ausreichenden Kontrast zur Farbe des **Body Hintergrund (4)** und **Shop Hintergrund (5)**  haben.\
\
**Ausnahme:** Du möchtest ein dunkles Layout mit dunkler Body Hintergrund und Shop Hintergrundfarbe erstellen. Dann kann es notwendig sein, helle Primär- und Sekundärfarben zu verwenden.
{% endhint %}

![](/files/DssHnzmtlhqSUZIB47T9)

Der Wert für **Meta Theme-Farbe (6)** gibt eine Farbe an, die Browser verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Insbesondere bei mobilen Endgeräten zu sehen.

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color>" %}

#### Body Hintergrund vs Shop Hintergrund

Die globalen Hintergrundfarben des Shops sind in Body Hintergrund und Shop Hintergrund unterteilt. Der **Body Hintergrund (4)** ist dabei der Hintergrund des gesamten HTML-Dokumentes (Body). Der **Shop Hintergrund (5)** ist der Hintergrund des Shops, der wiederum auf dem HTML-Dokument liegt.

{% hint style="info" %}
Achtung: Der Pfeil von der Primärfarbe zum Feld des Body Hintergrundes zeigt, dass Farben anhand ihrer Variablen in anderen Feldern weiter genutzt werden können.
{% endhint %}

![](/files/M45MqHmPoSGzZnzQ50iM)

### Grundeinstellungen

Es gibt im Theme bestimmte Bereiche, deren Vordergrundfarbe anhand der Hintergrundfarbe ermittelt wird. Das ist beispielsweise bei den Primärbuttons der Fall. Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.

Beispiel:

<div><figure><img src="/files/SsG6maW1BDRmw9MR4Ixl" alt=""><figcaption><p>Schwellenwert 4.5</p></figcaption></figure> <figure><img src="/files/kZ8q3dMwXoQittbAyYzw" alt=""><figcaption><p>Schwellenwert 2</p></figcaption></figure></div>

In Shopware 6.5 wurde die Berechnungsgrundlage auf die Web Content Accessibility Guidelines (WCAG) angepasst.

Der **Kontrast Schwellenwert (1)** dient also zur Berechnung von Kontrastfarben. Ist die Hintergrundfarbe eines Buttons z.B. altrosa `#d9ab98` wird bei einem Schwellenwert von `4.5` die Vordergrundfarbe als Kontrastfarbe **dunkel** errechnet. Bei einem Schwellenwert von `2` wird die Vordergrundfarbe des Buttons **hell** errechnet.

<figure><img src="/files/80I71WA6pAC7czUJEUxd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Die Einstellung des Kontrast Schwellenwertes hat möglicherweise Auswirkungen auf die Lesbarkeit bestimmter Elemente. Im Standard sorgt ein Kontrast Schwellenwert von 4.5 für eine optimale Lesbarkeit.
{% endhint %}