0Pricing
CSS Academy · Lektion

CSS-Variablen für Themes

Erstellen Sie mit CSS Custom Properties ein tokenbasiertes Theme-System, das zwischen hellen und dunklen Werten wechselt.

CSS-Variablen für Themes ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Überblick über die Theme-Architektur

Benutzerdefinierte CSS-Eigenschaften bilden die Grundlage für modernes CSS-Theming. Sie fungieren als live austauschbare Token-Ebene und ermöglichen Dark Mode, White-Labeling und eine Personalisierung durch die Nutzer.

Ebenen der Design-Tokens

Ein gut strukturiertes Theme-System besteht aus drei Ebenen:

  1. Primitive Tokens: Rohwerte (--blue-500: #3b82f6)
  2. Semantische Tokens: bedeutungsbezogene Werte (--color-primary: var(--blue-500))
  3. Komponenten-Tokens: komponentenspezifische Werte (--button-bg: var(--color-primary))

Light Theme definieren

Definieren Sie das vollständige Light Theme auf :root:

<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>

Dark Theme überschreiben

Überschreiben Sie die Tokens in einem Dark-Mode-Bereich (Media Query oder Klasse):

<div class="demo">Adapts to dark mode automatically</div>

Tokens in Komponenten verwenden

Komponenten verwenden semantische Tokens, niemals fest codierte Werte:

<div class="card">Card using theme tokens</div>

Überschreiben per Klasse

Ermöglichen Sie eine manuelle Überschreibung mit einer Klasse auf <html>:

<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>

Theming auf Komponentenebene

Eine Komponente kann für eine umfassendere Anpassung eine eigene Token-Ebene definieren:

<div class="card">Component-level theming</div>

White-Label-Theming

CSS-Variablen ermöglichen White-Label-Produkte, bei denen jeder Kunde durch das Überschreiben einer kleinen Anzahl von Marken-Tokens ein anderes Theme erhält:

<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>

Übergänge bei Theme-Änderungen

Weiche Übergänge bei Theme-Änderungen lassen sich mit einer CSS-Transition für farbbezogene Eigenschaften erreichen:

<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>

Dokumentation der Tokens

Dokumentieren Sie Ihre Design-Tokens, damit alle Entwickler wissen, welche Variablen sie verwenden sollen. Eine Styleguide-Komponente (wie Storybook), die alle Tokens mit ihren Werten für den Hell- und Dunkelmodus anzeigt, ist für große Teams äußerst wertvoll.

Token-Tooling: Style Dictionary

Style Dictionary (von Amazon) wandelt in JSON definierte Design-Tokens automatisch in benutzerdefinierte CSS-Eigenschaften, JavaScript-Konstanten und andere plattformspezifische Formate um – so bleiben die Tokens in Design und Code synchron.

Schnelltest

Auf welchen Token-Typ sollte eine .button-Komponente in einer zweistufigen Token-Architektur für ihre Hintergrundfarbe verweisen?

Zusammenfassung

CSS-Variablen ermöglichen robuste Theming-Systeme. Bauen Sie drei Ebenen auf: primitive Tokens, semantische Tokens und Komponenten-Tokens. Definieren Sie Themes als Token-Überschreibungen auf :root – per Media Query oder Attributselektor. Verwenden Sie in Komponenten semantische Tokens, damit das Theme automatisch vererbt wird. Tools wie Style Dictionary automatisieren die Verteilung von Tokens über verschiedene Plattformen hinweg.

Häufig gestellte Fragen

Ist die Lektion „CSS-Variablen für Themes“ kostenlos?

Ja — der vollständige Text von „CSS-Variablen für Themes“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Variablen für Themes“?

Erstellen Sie mit CSS Custom Properties ein tokenbasiertes Theme-System, das zwischen hellen und dunklen Werten wechselt. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „CSS-Variablen für Themes“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. prefers-color-scheme-Media-Query
  2. CSS-Variablen für Themes
  3. color-scheme-Eigenschaft
  4. Automatischer und manueller Dark-Mode-Umschalter
← Zurück zu CSS Academy