# 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 %}


---

# 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://themedocs.zenit.design/styling/typografie-und-farben/theme-farben.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.