> 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/tipps/theme-konfiguration.md).

# Theme Konfiguration

Hier bekommst Du ein paar Tipps im Umgang mit der Theme-Konfiguration

## Variablen

In der Theme-Konfiguration können gelegentlich auch Variablen in den Farbfeldern auftauchen und so ein einheitliches Aussehen des Farbschemas vereinfacht werden. Häufige Variablen sind:

| Variable                    | Funktion                             |
| --------------------------- | ------------------------------------ |
| `$sw-color-brand-primary`   | Primärfarbe des Shops                |
| `$sw-color-brand-secondary` | Sekundärfarbe des Shops              |
| `$sw-text-color`            | Textfarbe des Shops                  |
| `$sw-border-color`          | Rahmenfarbe, meist ein Grauton       |
| `$sw-background-color`      | Hintergrundfarbe der Seite           |
| `$sw-container-color`       | Hintergrundfarbe des Shop-Containers |

Den Namen einer jeden Variable findest Du in jedem Hilfe-Tooltip der Theme-Einstellungen.

![Variablennamen in der Theme-Konfiguration](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-d801eeb82a5a5776e9a54fcce93f30893c61ce9c%2FBildschirmfoto%202020-08-25%20um%2020.15.31.png?alt=media)

## Funktionen

In den Farbfeldern der Theme-Konfigurationen dürfen sogar einfache SCSS-Funktionen genutzt werden. So können beispielsweise Farben aufgehellt oder abgedunkelt werden.

```
darken($sw-color-brand-secondary, 10%)
```

verdunkelt die Farbe der Variable um 10%

```
lighten(desaturate($sw-color-brand-primary, 10%), 15%)
```

Es können auch mehrere Funktionen auf eine Variable oder Farbe angewendet werden. In diesem Beispiel wird die Primärfarbe des Shops um 10% aufgehellt und um 15% in der Sättigung reduziert.

[Mehr Informationen](https://sass-lang.com/documentation/modules/color)

## Farbenmanagement

Um zu vermeiden, dass bei einem Mouseover der Hintergrund einfärbt, setze einfach die `Background:hover` auf die selbe Farbe wie `Background`. Das ist insbesondere bei den Navigationen der Fall.