# Using SCSS functions in the 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.

![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-4965defad2a231f708abd4c8455f43daf59787fa%2Fconfig--scss-function.png?alt=media)

{% hint style="success" %}
**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](http://scg.ar-ch.org/) to generate light and dark color shades.
{% endhint %}

## Useful SCSS functions

In the following we will introduce a few useful SCSS functions. Please find more information in the official [SASS Documentation](https://sass-lang.com/documentation/modules/color).

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

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

To lighten colors, use the "**lighten**" function:

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

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

```css
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%:

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