🌓 1. Design-Tokens & Farbsysteme
Anstatt für jedes Element separate Dark-Mode-Regeln zu schreiben, steuern wir das gesamte Farbschema zentral über CSS Custom Properties:
☀️ LIGHT MODE
Heller Modus
Klarer Kontrast bei Tageslicht.
🌙 DARK MODE
Dunkler Modus
Schont die Augen bei Nacht & spart OLED-Akku.
⚙️ 2. CSS-Architektur: :root vs. [data-theme="dark"]
Die Variablen werden auf :root deklariert und unter [data-theme="dark"] lediglich überschrieben:
/* 1. Standard: Hell */
:root {
--bg-body: #f8fafc;
--bg-surface: #ffffff;
--text-main: #0f172a;
--border: #e2e8f0;
}
/* 2. Override: Dunkel */
[data-theme="dark"] {
--bg-body: #0f172a;
--bg-surface: #1e293b;
--text-main: #f8fafc;
--border: #334155;
}
/* 3. Anwendung in Komponenten: */
body {
background-color: var(--bg-body);
color: var(--text-main);
transition: background-color 0.3s ease, color 0.3s ease;
}🎨 Didaktische Analogie: Die Farbpalette des Malers
Die Bausteine deiner Website sind die Pinselstriche. CSS-Variablen sind die Farbtöpfe auf deiner Palette: Anstatt jedes gemalte Bild neu zu zeichnen, tauschst du einfach die Farbtöpfe von Tag- auf Nachtfarben aus.
🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.