Using SCSS functions in the configuration

In this tutorial, you will learn how to use SCSS functions in the theme configuration.

In the theme configuration you may also use simple SCSS functions in color fields in addition to theme variables. With such functions you can darken or lighten colors, for instance.

Using SCSS functions

A error-free syntax is important to avoid errors in the storefront, therefore these functions are recommended for experienced users.

Tip: In case you simply want to darken or lighten colors and do not want to use SCSS functions, you can use the online tool Sass Color Generator to generate light and dark color shades.

Useful SCSS functions

In the following we will introduce a few useful SCSS functions. Please find more information in the official SASS Documentation.

To darken colors you may use the "darken" function:

darken(#0c7ebb, 10%)
darken($sw-color-brand-primary, 10%)

To lighten colors, use the "lighten" function:

lighten(#111, 10%)
lighten($sw-text-color, 10%)

In addition, there are other SCSS functions which can be used:

complement($color) // RGB complementary color of $color
grayscale($color) // Gray value with same brightness as $color
      
darken($color, $amount) // Darkens the color $color (e.g. 10%)
lighten($color, $amount) // Lightens $color (e.g. 10%)
      
desaturate($color, $amount) // Reduces the saturation of $color (e.g. 10%).
saturate($color, $amount) // Increases the saturation of $color (e.g. 10%).
      
fade-in($color, $amount) // Makes $color more opaque (e.g. 0.1)

fade-out($color, $amount) // Makes $color more transparent (e.g. 0.1)

Several SCSS functions can also be combined in one color field. In the following example, the secondary color is lightened by 15% and the saturation is reduced by 5%:

lighten(desaturate($sw-color-brand-secondary, 15%), 5%)