CSS-Variablen für Themes
Deklarieren Sie Custom Properties mit --, verwenden Sie var(), überschreiben Sie sie in verschachtelten Gültigkeitsbereichen und implementieren Sie einen Umschalter für helle und dunkle Themes.
CSS-Variablen für Themes ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind benutzerdefinierte CSS-Eigenschaften?
Benutzerdefinierte CSS-Eigenschaften (CSS-Variablen) speichern Werte, die in einem Stylesheet wiederverwendet werden können. Sie werden mit --name: value deklariert und mit var(--name) verwendet. Anders als Präprozessorvariablen (Sass) sind sie dynamisch — Sie können sie mit JavaScript aktualisieren.
Benutzerdefinierte Eigenschaften deklarieren
Deklarieren Sie Eigenschaften auf :root, damit sie global verfügbar sind. Sie können sie auch auf jedem beliebigen Element deklarieren, um ihren Gültigkeitsbereich auf den Unterbaum dieses Elements zu beschränken.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Benutzerdefinierte Eigenschaften verwenden
Referenzieren Sie eine Variable mit var(--name). Geben Sie als zweites Argument einen Fallback an: var(--color-primary, #3182ce). Der Fallback wird verwendet, wenn die Variable nicht definiert ist.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}Der Cascade: Variablen mit Gültigkeitsbereich
Benutzerdefinierte Eigenschaften werden kaskadiert und vererbt. Wenn Sie eine Variable an einem untergeordneten Element neu definieren, überschreibt sie den Wert des übergeordneten Elements für dieses Element und alle seine Nachkommen.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Dark Mode mit CSS-Variablen
Das sauberste Muster für den Dark Mode: Definieren Sie helle und dunkle Farbpaletten als CSS-Variablen. Wechseln Sie eine Klasse um oder verwenden Sie die Media Query prefers-color-scheme. Einzelne Farbeigenschaften müssen nicht überschrieben werden.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Dark Mode mit JavaScript umschalten
Fügen Sie eine Umschaltfläche hinzu, die ein Datenattribut oder eine Klasse am Wurzelelement wechselt. Die CSS-Variablen erledigen den Rest — eine Zeile JavaScript, keine einzelnen Stilüberschreibungen.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Variablen mit JavaScript aktualisieren
element.style.setProperty('--name', value) aktualisiert eine benutzerdefinierte Eigenschaft direkt am Element. Wenn Sie sie mit removeProperty entfernen, wird der Wert aus der Kaskade wiederhergestellt. Dadurch werden dynamische Themes und animierte Werte ermöglicht.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Design-Tokens als CSS-Variablen
Definieren Sie alle Designentscheidungen – Farbpalette, Abstandsskala und Typografieskala – als CSS-Variablen. Dadurch entsteht eine zentrale Quelle der Wahrheit, aus der die Komponenten ihre Werte beziehen. Wenn Sie einen Token ändern, wird die Änderung sofort überall übernommen.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Variablen in calc() verwenden
CSS-Variablen funktionieren innerhalb von calc() und ermöglichen responsive Berechnungen auf Grundlage von Token-Werten.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Browserunterstützung
Benutzerdefinierte CSS-Eigenschaften werden von allen modernen Browsern unterstützt (bei den großen Browsern seit 2016). Für diese Funktion benötigen Sie keinen Präprozessor. Fallback für sehr alte Browser: Geben Sie vor var() einen statischen Wert an.
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Benutzerdefinierte Eigenschaften und Sass-Variablen
Sass-Variablen werden zu statischen Werten kompiliert. Benutzerdefinierte CSS-Eigenschaften existieren zur Laufzeit, sind dynamisch, können mit JavaScript geändert werden und werden durch den DOM vererbt. Verwenden Sie CSS-Variablen für Themes und Sass-Variablen für Konstanten zur Build-Zeit.
Schnelltest
Wie lesen und aktualisieren Sie eine benutzerdefinierte CSS-Eigenschaft aus JavaScript?
Zusammenfassung: Benutzerdefinierte CSS-Eigenschaften
Deklarieren Sie sie mit -- auf :root für einen globalen Gültigkeitsbereich. Verwenden Sie sie mit var(). Variablen mit eingeschränktem Gültigkeitsbereich werden an Nachfahren vererbt. Dark Mode: Definieren Sie Farb-Tokens in einer Media Query oder einem Datenattribut neu. Aktualisieren Sie sie aus JavaScript mit style.setProperty(). Design-Tokens als Variablen = eine zentrale Quelle der Wahrheit.
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 Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSS-Variablen für Themes“?
Deklarieren Sie Custom Properties mit --, verwenden Sie var(), überschreiben Sie sie in verschachtelten Gültigkeitsbereichen und implementieren Sie einen Umschalter für helle und dunkle Themes. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 4 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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Flexbox im Detail: Ausrichtung, Umbruch, Reihenfolge
- CSS Grid: template-areas, auto-fit, minmax
- Flexbox und Grid kombinieren
- CSS-Variablen für Themes