Farbkonfiguration
Last updated
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
In der ThemeWare® Konfiguration findest du diverse Farbkonfigurationsfelder (Farbauswahl). Im Tab "Layout" findest du beispielsweise den Bereich "Hauptfarben". Hier konfigurierst du die wichtigsten Farben für deinen Shop.
Eine Farbauswahl erkennst du immer an einem kleinen, meist bunten Rechteck, links neben dem Eingabefeld. Diese Rechteck ist eine Vorschau der konfigurierten Farbe.
Hinweis: Grundlagen zur Farbkonfiguration findest in der ThemeWare® Einführung: Farben konfigurieren
Wichtig: Bitte achte darauf, dass alle Konfigurationsfelder valide konfiguriert sind. Leere Felder sind i.d.R. nicht "zulässig".
Im Eingabefeld siehst du dann den entsprechenden Farbcode. In der Regel findest du dort einen Code nach dem Muster #123456. Die ist ein Hexadezimalwert einer Farbe (z.B.: #ff0000).
Hinweis: Achte darauf den korrekten Farbcode zu nutzen um Fehler bei der Kompilierung zu vermeiden.
Wir empfehlen dir mit Hexadezimalwerten zu arbeiten. Du kannst aber auch mit RGBA-Werten (z.B. rgba(255, 0, 0, 0.5)) arbeiten. Über RGBA-Werte (RGB-Farbmodell + Alpha-Kanal) kannst du sehr leicht Transparenzen definieren.
Wenn du auf die Farbvorschau klickst, öffnet sich der "Farbwähler" auch "Color Picker" genannt.
Nutze einfach den Farbwähler um einen fehlerfreien Farbcode zu generieren.
Tipp: Einsteigern empfehlen wir mit dem Farbwähler zu arbeiten. Dieser generiert automatisch den richtigen Farbcode für die gewünschte Farbe.
Du wirst bei der Farb-Konfiguration in ThemeWare® gelegentlich den Wert transparent finden. Dieser steht für eine durchsichtige bzw. unsichtbare Farbe.
Eine Transparenz erreichst du im Idealfall über einen RGBA-Wert (z.B. rgba(0, 0, 0, 0) oder rgba(255, 255, 255, 0)), in ThemeWare® hat der Wert transparent in manchen Konfigurationsfeldern aber eine besondere Funktion. "Transparent" wird genutzt um gleichzeitig noch andere Elemente (z.B. Rahmen um Elemente) zu entfernen.
Tipp: Wir empfehlen dir den Wert rgba(0, 0, 0, 0) für Transparenzen bzw. eine durchsichtige bzw. unsichtbare Farbe zu nutzen.
Zusätzlich zu diesen Farbwerten kannst du auch Variablen oder SCSS-Funktionen verwenden.
Variablen bzw. Theme-Variablen sind die technischen Bezeichnungen für ein Konfigurationsfeld (z.B. $sw-color-brand-primary für die Primärfarbe). Beim kompilieren wird diese Variable von Shopware durch den Wert des entsprechenden Konfigurationsfeldes ersetzt.
Theme-Variablen können dir dabei helfen, dass du häufig verwendete Farben nicht jedes mal neu eingeben musst bzw. dass du viele Farbfelder mit der entsprechenden Variable auf einen Rutsch ändern kannst.
Mit einfachen SCSS-Funktionen kannst du Farbwerte darüber hinaus modifizieren (z.B. abdunkeln, aufhellen etc.).
Beides empfehlen wir nur erfahrenen Anwendern, da diese schnell zu Fehlern führen können.
Mehr Informationen zum Thema "Theme-Variablen" und "SCSS-Funktionen" findest du im Bereich "Anleitungen" im Bereich "Individuelle Anpassungen".
Tipp: Zum Generieren von Farbnuancen hell und dunkel kannst du auch einfach das Online-Tool Sass Color Generator nutzen.
Das Design deines Shops wird maßgeblich durch die Primärfarbe und die Sekundärfarbe bestimmt.
Zusätzlich bietet ThemeWare® die auch die Nuancen hell und dunkel dieser beiden Farben an.
Zum Generieren von Farbnuancen hell und dunkel empfehlen wir dir das Online-Tool Sass Color Generator. Damit kannst du dir ganz einfach Nuancen für eine Grundfarbe generieren lassen.
Wenn du diese Farben eingestellt hast, bis du mit der Farbkonfiguration deines Themes schon sehr weit. Dennoch solltest du dir die anderen Bereiche anschauen.
Wenn du einen ungültigen Farbwert eingibst und im Theme-Manager speicherst, kommt es zu einer Fehlermeldung.
Angenommen du gibst bei der Primärfarbe aus versehen eine zweite Raute ein (#f2832e#), erscheint beim Speichern der Konfiguration die folgende Fehlermeldung:
Da wir wissen, dass wir gerade die Primärfarbe geändert haben, ist es naheliegend, dass wir dort wohl etwas falsch gemacht haben. Also korrigieren wir den Wert direkt.
Du wirst nun feststellen, dass obwohl du den Wert korrigiert hast, beim Speichern erneut diese Fehlermeldung erscheint. Wichtig ist hierbei zu wissen, dass der Theme-Manager jetzt sozusagen "kaputt" ist. Egal was du eingibst, der falsche Wert hat sich quasi festgefressen.
Leider können wir dieses verhalten nicht ändern, aber wir gehen davon aus, dass Shopware dies mit einem künftigen Update verbessert.
Um das Problem zu lösen, musst du die Seite einmal neu laden (z.B. mit F5). Danach navigierst du wieder zum "fehlerhaften" Konfigurationsfeld – dort ist tatsächlich noch der falsche Wert gespeichert – korrigierst den Wert und speicherst die Änderung nochmals.
Nun funktioniert das speichern und damit die Kompilierung des Themes wieder.
Um sicherzustellen, dass dein Shop die Barrierefreiheitsstandards für den Farbkontrast erfüllt, empfehlen wir bei der Farbkonfiguration auf ein ausreichendes Kontrastverhältnis von Vorder- und Hintergrundfarben deiner Elemente zu achten.
Das Kontrastverhältnis ist ein numerischer Wert, der von 1 bis 1 reicht. (kein Kontrast) bis 21 (Maximaler Kontrast). Als in den Richtlinien für die Barrierefreiheit von Webinhalten (WCAG) ein minimales Kontrastverhältnis wird 4,5:1 für normalen Text und 3:1 für großen Text empfohlen.
Du kannst dafür Online-Tools (siehe "Contrast Checker" oder "Accessible Color Contrast") verwenden, um das Kontrastverhältnis deiner Farben zu berechnen und zu überprüfen.
ThemeWare® nutzt verschiedene Standardfarben beispielsweise Status-Farben für Badges oder dem Kaufen-Button. Die Textfarben generieren sich automatisch als Kontrastfarbe. Wähle also einfach passende "Hintergrund"-Farben für ein ausreichendes Kontrastverhältnis zu hellen bzw. dunklen Texten. Folgende Farben bieten sich an:
Status-Farben:
Erfolg: #3cc261
Information: #26b6cf
Hinweis: #ffbd5d
Fehler: #e52427 -> #ff6051
Kaufen-Button: #58b274
Status-Farben:
Erfolg: #3cc261 -> #007e4e
Information: #26b6cf -> #005b99
Hinweis: #ffbd5d -> #974200
Fehler: #e52427 -> #c20017
Kaufen-Button: #58b274 -> #29864c
Einführung: Wie du Farben in deinem Shop konfigurieren kannst, erfährst du im Artikel Farben konfigurieren
