# 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%)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://knowledge.themeware.design/knowledge-base/tutorials/configuration/using-scss-functions-in-the-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.