> 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/content/erlebniswelten/css-variablen.md).

# CSS-Variablen

CSS-Variablen sind ein offizieller Teil der CSS-Spezifikation und heißen dort CSS Custom Properties

Das Theme liefert zu den wichtigsten Einstellungen aus der Theme-Konfiguration CSS-Variablen aus. Du kannst Dir diese in der Storefront anschauen, indem Du die Entwickler-Tools (im Browser: `Rechtsklick > Untersuchen`)Deines Browsers verwendest. CSS Variablen helfen Dir ein einheitliches Aussehen in der Darstellung Deiner Storefront zu gewährleisten.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-1f83d06135bdb74d37de36d071cf712be89e2811%2Fdocs-de-storefront-css-root-variables-example.png?alt=media" alt=""><figcaption></figcaption></figure>

### Verfügbare CSS Variablen

```css
// CSS Variablen
--zen-layout-container-width
--zen-layout-button-radius
--zen-layout-input-radius
--zen-layout-element-radius
--zen-color-brand-primary
--zen-color-brand-secondary
--zen-border-color
--zen-background-color
--zen-container-bg
--zen-meta-theme-color
--zen-text-color
--zen-light-text-color
--zen-headline-color
--zen-light-headline-color
--zen-color-price
--zen-color-buy-button
--zen-color-buy-button-text
--zen-gray-100
--zen-gray-200
--zen-gray-300
--zen-gray-400
--zen-gray-500
--zen-gray-600
--zen-gray-700
--zen-gray-800
--zen-gray-900
--zen-font-family-base
--zen-font-family-headline
--zen-font-size-base
--zen-h1-font-size
--zen-h2-font-size
--zen-h3-font-size
--zen-h4-font-size
--zen-h5-font-size
--zen-h6-font-size
--zen-font-weight-base
--zen-headings-font-weight
```

### Anwendung

Der in der Variable hinterlegte Farbwert entspricht der Einstellung aus der Theme-Konfiguration. Eine CSS-Variable kannst Du beispielsweise in den Farbfeldern der Erlebniswelten-Elemente nutzen.

```
//  Aufruf der Primärfarbe des Shops als CSS-Variable
var(--zen-color-brand-primary)
```

Beispiel:

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-9efec9894ebcd9c904303f173e4d8435fc3ad608%2Fdocs-de-config-cms-css-root-variable%20(1).png?alt=media" alt=""><figcaption><p>Sekundärfarbe als CSS Variable</p></figcaption></figure>