CSS Custom Properties erklärt, mit einem Live-Theme in Hell und Dunkel, das nur aus Variablen besteht, getPropertyValue und setProperty in JavaScript, @property, Tailwind v4 @theme und typischen Stolperfallen.
Eine CSS-Variable deklarierst du mit zwei Bindestrichen, --brand: #2563eb;, meist innerhalb von :root, damit die ganze Seite sie sieht, und liest sie mit var(--brand). Ein zweites Argument ist der Fallback: var(--brand, blue). Variablen werden vererbt wie color, wenn du eine also in einem Abschnitt neu definierst, ändert sie sich für alles darin, und das macht Themes einfach.
Syntax auf einen Blick
Dieser Leitfaden behandelt Deklaration, Scope und Fallbacks, dann einen Theme-Umschalter, bei dem sich nur Variablen ändern, ein Tool, das Variablen direkt auf dieser Seite per JavaScript liest und schreibt, registrierte Properties mit @property, wie Tailwind v4 sein Theme in Variablen umwandelt, und die Fehler, durch die var() stillschweigend scheitert.
Sass-Variablen werden beim Kompilieren des Stylesheets ersetzt und verschwinden aus der Ausgabe. CSS Custom Properties existieren zur Laufzeit im Browser, werden durch das DOM vererbt, können sich pro Element unterscheiden und lassen sich nach dem Laden der Seite per JavaScript oder durch eine Media-Query-Regel ändern.
Nein. var() ist in der Bedingung einer @media-Regel nicht erlaubt, weil Media Queries ohne ein Element ausgewertet werden, von dem geerbt werden könnte. Du kannst aber den Wert einer Variable innerhalb eines Media-Query-Blocks ändern, und so macht man Tokens üblicherweise responsiv.
Prüfe Schreibweise und Groß- und Kleinschreibung, ob die Variable auf dem Element oder einem Vorfahren definiert ist und ob der endgültige Wert für die Eigenschaft gültig ist. Ist der eingesetzte Wert ungültig, wird die Deklaration zum Zeitpunkt des berechneten Werts ungültig, und die Eigenschaft fällt auf ihren geerbten oder Anfangswert zurück, nicht auf deine vorherige Regel.
Eine nicht registrierte Variable wird als String behandelt, springt also in der Mitte um, statt weich überzublenden. Registriere sie mit @property und einer Syntax wie <color> oder <angle>, dann kann der Browser sie in Transitions und Animationen flüssig interpolieren.
Custom Properties und var() funktionieren seit Jahren in allen großen Browsern. @property ist neuer: Firefox hat es 2024 mit Version 128 eingeführt, prüfe also caniuse, wenn du ältere Versionen unterstützt, und behalte einen nicht registrierten Fallback.
Helle und dunkle Werte
Die zweite Karte definiert --accent für sich selbst neu. Die dritte nutzt eine Variable, die niemand definiert hat, daher erscheint die Fallback-Farbe.
Ein einziger Satz Komponentenregeln. Das Theme ist ein anderer Satz Werte, ausgewählt über die Systemeinstellung oder ein data-theme-Attribut.
Lies den berechneten Wert von jedem Element. Schreibe auf :root für eine globale Änderung oder auf ein einzelnes Element, um nur dessen Teilbaum zu beeinflussen.
Wenn du --angle als <angle> registrierst, kann der Browser es interpolieren. Ohne Registrierung würde der Verlauf springen, statt sich zu drehen.
In Tailwind v4 erzeugen Variablen in @theme Utilities wie bg-brand und werden zusätzlich als echte CSS-Variablen ausgegeben, die du mit var() verwenden kannst.
Was Leute oft aus dem Tritt bringt
Helles und dunkles Theme, nur mit Variablen
Theme
Heller Modus
Dunkler Modus
Wochenbericht
Mehr Bestellungen als letzte Woche
Beispielbestellungen
Details ansehen
Das Einzige, was sich ändert
CSS kopieren
Variablen per JavaScript lesen und schreiben
Die Beispielbox unten nutzt var(--demo-accent, #2563eb) für ihren Rahmen und var(--demo-radius, 8px) für ihre Ecken. Setze eine der beiden Variablen und die Box ändert sich.
Variablenname
Neuer Wert
Der Name einer Custom Property beginnt mit zwei Bindestrichen, zum Beispiel --demo-radius.
Lesen
Setzen
Entfernen
Probiere --demo-radius
Beispielbox
(nicht gesetzt)
Kostenlos starten · Keine Kreditkarte nötig