Aufgaben-Python/courses/html_css/14_dark_mode_und_themes

CSS 14: Dark/Light Mode & System-Themes (CSS Custom Properties)

Ein nativer Dark Mode gehört heute zur Pflichtausstattung moderner Webanwendungen. In diesem Modul lernst du, wie du Themes mit CSS Custom Properties (Variablen), der Media Query @media (prefers-color-scheme) und einem flexiblen HTML-Attribut-Umschalter (data-theme) aufbaust.

---

🎯 Lernziele

1. CSS Custom Properties als Design-Token: Globale Farbvariablen in :root definieren (--bg-body, --bg-card, --text-main, --accent).
2. Systempräferenz abfragen: @media (prefers-color-scheme: dark) für automatischen System-Sync.
3. Explizites Theme-Override: Selektor [data-theme="dark"] und [data-theme="light"].
4. Sanfte Theme-Transitions: transition: background-color 0.3s ease, color 0.3s ease.
5. Theme-Toggle-Interaktion: Schalter mit JavaScript und localStorage-Persistenz.

---

🧠 Die Theme-Architektur im Detail

1. Variablen auf :root definieren (Light Theme als Standard)

:root {
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --primary: #4f46e5;
}

---

2. Dark Theme über [data-theme="dark"] überschreiben

Wir überschreiben nur die Werte der Variablen, nicht die Selektoren der Elemente!

[data-theme="dark"] {
  --bg-body: #090d16;
  --bg-surface: #131b2e;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #1e293b;
  --primary: #6366f1;
}

---

3. Automatische Anpassung an Betriebssysteme

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-body: #090d16;
    --bg-surface: #131b2e;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #1e293b;
  }
}

---

4. Sanfter Farbwechsel mit CSS Transitions

body, .theme-card, button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

---

🎯 Aufgabenstellung in aufgabe.html

• TEILZIEL 1: Definiere in :root die Standard-Variablen für das Light Theme (--bg-body: #f8fafc, --bg-surface: #ffffff, --text-main: #0f172a, --border-color: #e2e8f0).
• TEILZIEL 2: Überschreibe in [data-theme="dark"] die Variablen für das Dark Theme (--bg-body: #0f172a, --bg-surface: #1e293b, --text-main: #f8fafc, --border-color: #334155).
• TEILZIEL 3: Unterstütze @media (prefers-color-scheme: dark) für automatischen System-Sync.
• TEILZIEL 4: Wende die Variablen auf body und .theme-card an (background: var(--bg-surface), color: var(--text-main)).
• TEILZIEL 5: Implementiere die Toggle-Funktion in JavaScript mit document.documentElement.setAttribute('data-theme', ...).

Teste deine Theme-Logik mit test_aufgabe.js!