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.

Verfügbare CSS Variablen

// 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:

Sekundärfarbe als CSS Variable