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.

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.

Last updated