Theme-Farben
Last updated
Last updated
Im Reiter Farben findest Du die globalen Farbeinstellungen des Themes. Die Primärfarbe (1) und Sekundärfarbe (2) sind die Hauptfarben des Shops.
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.
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.
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.
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.
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:
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.
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.
