# SCSS-Funktionen in der Konfiguration verwenden

In der Theme-Konfiguration kannst du in Farbfeldern neben Theme-Variablen auch einfache **SCSS-Funktionen** verwenden. Mit solchen Funktionen kannst du beispielsweise Farben abdunkeln oder aufhellen.

## SCSS-Funktionen verwenden

Wichtig ist ein **fehlerfreier Syntax**, um Fehler in der Storefront zu vermeiden, darum empfehlen sich diese Funktionen eher für erfahrene Anwender.

![](/files/nKdK3Ir3Tm5s70Iy9NKV)

{% hint style="success" %}
**Tipp**: Möchtest du einfach nur Farben abdunkeln oder aufhellen und keine SCSS-Funktionen nutzen, kannst du zum Generieren von Farbnuancen hell und dunkel beispielsweise das Online-Tool "[Sass Color Generator](http://scg.ar-ch.org/)" nutzen.
{% endhint %}

## Nützliche SCSS-Funktionen

Nachfolgend stellen wir dir ein paar nützliche SCSS-Funktionen vor. Mehr Informationen dazu findest du in der offiziellen [SASS-Dokumentation](https://sass-lang.com/documentation/modules/color).

Zum Abdunkeln von Farben kannst du die Funktion "**darken**" verwenden:

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

Zum Aufhellen von Farben nutze die Funktion "**lighten**":

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

Darüber hinaus gibt es noch weitere SCSS-Funktionen, welche genutzt werden können:

```css
complement($color) // RGB-Komplementärfarbe von $color
grayscale($color) // Grauwert mit gleicher Helligkeit wie $color
      
darken($color, $amount) // Macht die Farbe $color dunkler (z.B. 10%)
lighten($color, $amount) // Macht $color heller (z.B. 10%)
      
desaturate($color, $amount) // Reduziert die Sättigung von $color (z.B. 10%)
saturate($color, $amount) // Erhöht die Sättigung von $color (z.B. 10%)
      
fade-in($color, $amount) // Macht $color undurchsichtiger (z.B. 0.1)
fade-out($color, $amount) // Macht $color transparenter (z.B. 0.1)
```

Es können auch mehrere SCSS-Funktionen in einem Farbfeld kombiniert werden. Im folgenden Beispiel wird die Sekundärfarbe um 15% aufgehellt und die Sättigung um 5% reduziert:

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

{% hint style="info" %}
**Hinweis**: Wie bei allen Konfigurationsfeldern gilt auch in diesem Fall, dass du Variablen (z.B. `$sw-color-brand-secondary`) nur bedingt nutzen kannst. Technisch gesehen muss die entsprechende Variable vor Nutzung in einem anderen Feld bereits initiiert worden sein.

Erhältst du einen Kompilierungsfehler, nutze bitte einen validen Farbwert anstatt der Variable.
{% endhint %}


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/konfiguration/scss-funktionen-in-der-konfiguration-verwenden.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.