CSS-Variablen für den Theme-Wechsel

CSS Custom Properties (Variablen), die auf :root definiert sind, sind im gesamten Stylesheet global verfügbar. Definieren Sie eine vollständige Farbpalette einmalig – Hintergründe, Textfarben, Oberflächen und Rahmen – und referenzieren Sie sie überall. Diese zentrale Quelle der Wahrheit macht den Theme-Wechsel trivial.

Wenn ein Attribut data-theme="dark" auf document.documentElement gesetzt ist, überschreibt ein CSS-Selektor wie [data-theme='dark'] die Root-Variablen mit dunklen Werten. Komponenten referenzieren var(--color-bg) und übernehmen automatisch die neuen Werte, ohne dass Codeänderungen erforderlich sind.

Definieren Sie mindestens: --color-bg (Seitenhintergrund), --color-text (primärer Text), --color-primary (Markenfarbe), --color-surface (Hintergrund von Karten/Bedienfeldern) und --color-border (Trennlinien). Ein konsistenter Token-Satz verhindert, dass Ad-hoc-Farbwerte in Komponenten auftauchen.

Referenzieren Sie in den CSS-Styles Ihrer Komponente Variablen wie background: var(--color-bg) und color: var(--color-text). Sie können auch einen Fallback-Wert angeben: var(--color-bg, #ffffff). Der Browser löst die Variable beim Zeichnen auf, sodass eine einzelne Klasse für helle und dunkle Themes funktioniert.

Fügen Sie dem :root-Selektor transition: background-color 200ms, color 200ms hinzu. Wenn sich das data-theme-Attribut ändert, animieren alle Elemente, die CSS-Variablen verwenden, gleichzeitig zu ihren neuen Werten. So entsteht ein professioneller Eindruck, ohne Animationscode in JS.

Die Verwaltung des Themes über CSS-Variablen ist dem Setzen von Inline-Stilen aus JavaScript überlegen. Der Browser übernimmt alle Stilneuberechnungen nativ, für jede thematisierte untergeordnete Komponente werden keine zusätzlichen React-Neudarstellungen ausgelöst, und die CSS-Kaskade übernimmt die Vererbung automatisch. JavaScript muss lediglich ein Attribut am Root-Element umschalten.

Sie können CSS-Variablen mit der Abfrage @media (prefers-color-scheme: dark) als reinen CSS-Fallback kombinieren. Definieren Sie Ihre dunklen Überschreibungen innerhalb der Media Query zusätzlich zu (oder statt) dem data-theme-Selektor. So funktioniert der Dark Mode auch dann, wenn JavaScript noch nicht ausgeführt wurde.

Am robustesten ist eine Kombination beider Mechanismen: Die @media-Abfrage stellt den Standard des Betriebssystems bereit, während ein data-theme-Attribut eine Benutzerüberschreibung per JavaScript ermöglicht. Wenn das Attribut vorhanden ist, hat es aufgrund seiner Spezifität Vorrang; andernfalls greift die Media Query.

Verwenden Sie für Bilder, die auf dunklen Hintergründen schlecht aussehen, das HTML-Element picture mit einem untergeordneten Element source media="(prefers-color-scheme: dark)". Der Browser wählt die dunkle Variante automatisch aus. Für SVG-Icons in CSS können Sie filter: invert(1) als schnelle Näherung verwenden.

CSS-Variablen können auch auf einzelne Komponenten beschränkt werden, indem Sie sie statt auf :root am Root-Element einer Komponente definieren. So wird ein Theme pro Komponente möglich, etwa eine Seitenleiste mit einem eigenen Hintergrund-Token, der sich vom Seitenhintergrund unterscheidet, wobei beim globalen Theme-Wechsel weiterhin alles korrekt umgeschaltet wird.

Chrome DevTools zeigt im Bereich „Styles“ die aufgelösten Werte von CSS-Variablen an. Klicken Sie auf die Variablenreferenz, um zu ihrer Definition zu springen. So können Sie leicht prüfen, ob bei einem beliebigen Element das korrekte dunkle oder helle Token angewendet wird. Sie können Variablenwerte außerdem direkt im Bereich bearbeiten.

Welcher CSS-Selektor wird verwendet, um globale CSS Custom Properties zu definieren, die für das gesamte Dokument gelten?

CSS Custom Properties auf :root stellen ein zentralisiertes Token-System für Themes bereit. Schalten Sie ein data-theme-Attribut am HTML-Element um, um Themes sofort zu wechseln. Fügen Sie CSS-Übergänge für eine sanfte Animation hinzu, verwenden Sie die prefers-color-scheme-Media-Query als reinen CSS-Fallback und vermeiden Sie JS-Überschreibungen von Stilen auf Komponentenebene.