# Theme configuration

## Variablen

In the theme configuration, variables may occasionally appear in the color fields, simplifying a consistent look for the color scheme.&#x20;

You can find the name of each variable in each theme settings help tooltip.

![Variablennamen in der Theme-Konfiguration](/files/PZwkoNIhmB9LPAyT2Xpp)

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


---

# 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://themedocs.zenit.design/en/tips/theme-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.
