Theme configuration

Here you will get some tips in dealing with the theme configuration

Variablen

In the theme configuration, variables may occasionally appear in the color fields, simplifying a consistent look for the color scheme.

You can find the name of each variable in each theme settings help tooltip.

Variablennamen in der Theme-Konfiguration

Functions

Even simple SCSS functions may be used in the color fields of the theme configurations. For example, colors can be lightened or darkened.

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

Darkens the color of the variable by 10%

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

Multiple functions can also be applied to a variable or color. In this example, the primary color of the store is lightened by 10% and reduced in saturation by 15%. More informations:

https://sass-lang.com/documentation/modules/color

Color Management

To prevent the background from coloring on mouseover, simply set the Background:hover on the same color as background. This is especially the case for the navigations.