Theme Konfiguration

Hier bekommst Du ein paar Tipps im Umgang mit der Theme-Konfiguration

Variablen

In der Theme-Konfiguration können gelegentlich auch Variablen in den Farbfeldern auftauchen und so ein einheitliches Aussehen des Farbschemas vereinfacht werden. Häufige Variablen sind:

Variable	Funktion
$sw-color-brand-primary	Primärfarbe des Shops
$sw-color-brand-secondary	Sekundärfarbe des Shops
$sw-text-color	Textfarbe des Shops
$sw-border-color	Rahmenfarbe, meist ein Grauton
$sw-background-color	Hintergrundfarbe der Seite
$sw-container-color	Hintergrundfarbe des Shop-Containers

Den Namen einer jeden Variable findest Du in jedem Hilfe-Tooltip der Theme-Einstellungen.

Variablennamen in der Theme-Konfiguration

Funktionen

In den Farbfeldern der Theme-Konfigurationen dürfen sogar einfache SCSS-Funktionen genutzt werden. So können beispielsweise Farben aufgehellt oder abgedunkelt werden.

darken($sw-color-brand-secondary, 10%)

verdunkelt die Farbe der Variable um 10%

lighten(desaturate($sw-color-brand-primary, 10%), 15%)

Es können auch mehrere Funktionen auf eine Variable oder Farbe angewendet werden. In diesem Beispiel wird die Primärfarbe des Shops um 10% aufgehellt und um 15% in der Sättigung reduziert.

Mehr Informationen

Farbenmanagement

Um zu vermeiden, dass bei einem Mouseover der Hintergrund einfärbt, setze einfach die Background:hover auf die selbe Farbe wie Background. Das ist insbesondere bei den Navigationen der Fall.