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