> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/tips/theme-configuration.md).

# 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](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FghpZJSusjUj1tOCVvhhX%2Fdocs-en-config-theme-tooltip-variable.png?alt=media\&token=8a581869-f67b-44a5-982b-056241baef1a)

## 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.