Aufgaben-Python/courses/html_css/14_dark_mode_und_themes/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <link rel="icon" type="image/svg+xml" href="../../../assets/favicon.svg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 14: Dark/Light Mode &amp; System-Themes</title>
  <link rel="stylesheet" href="../../../assets/style.css">
  <style>
    .theme-preview-row {
      display: flex;
      gap: 20px;
      margin: 20px 0;
      flex-wrap: wrap;
    }
    .theme-box {
      flex: 1 1 250px;
      padding: 24px;
      border-radius: var(--radius-md);
      transition: transform 0.2s ease;
    }
    .theme-box-light {
      background: #ffffff;
      color: #0f172a;
      border: 2px solid #e2e8f0;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }
    .theme-box-dark {
      background: #0f172a;
      color: #f8fafc;
      border: 2px solid #334155;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    }
  </style>
</head>
<body>
  <div class="app-layout">
    <div class="app-main">
      <header>
        <div class="header-container">
          <div class="header-badge">💎 Lehrpfad 4: CSS-Architektur &amp; UI Master</div>
          <h1>CSS 14: Dark/Light Mode &amp; System-Themes</h1>
          <p>Erstelle professionelle Theme-Systeme mit CSS Custom Properties, prefers-color-scheme und nahtlosem JavaScript-Toggle.</p>
        </div>
      </header>

      <main class="container">
        <!-- 1. THEME PREVIEW -->
        <section class="card">
          <h2>🌓 1. Design-Tokens &amp; Farbsysteme</h2>
          <p>Anstatt für jedes Element separate Dark-Mode-Regeln zu schreiben, steuern wir das gesamte Farbschema zentral über CSS Custom Properties:</p>

          <div class="theme-preview-row">
            <div class="theme-box theme-box-light">
              <div style="font-size: 0.8rem; font-weight: 700; color: #4f46e5; margin-bottom: 8px;">☀️ LIGHT MODE</div>
              <h3 style="font-size: 1.15rem; margin-bottom: 6px;">Heller Modus</h3>
              <p style="font-size: 0.88rem; color: #64748b;">Klarer Kontrast bei Tageslicht.</p>
            </div>

            <div class="theme-box theme-box-dark">
              <div style="font-size: 0.8rem; font-weight: 700; color: #818cf8; margin-bottom: 8px;">🌙 DARK MODE</div>
              <h3 style="font-size: 1.15rem; margin-bottom: 6px;">Dunkler Modus</h3>
              <p style="font-size: 0.88rem; color: #94a3b8;">Schont die Augen bei Nacht &amp; spart OLED-Akku.</p>
            </div>
          </div>
        </section>

        <!-- 2. CODE STRUKTUR -->
        <section class="card">
          <h2>⚙️ 2. CSS-Architektur: :root vs. [data-theme="dark"]</h2>
          <p>Die Variablen werden auf <code>:root</code> deklariert und unter <code>[data-theme="dark"]</code> lediglich überschrieben:</p>

          <pre><code>/* 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;
}</code></pre>

          <div class="box box-analogie">
            <div class="box-title">🎨 Didaktische Analogie: Die Farbpalette des Malers</div>
            <p>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.</p>
          </div>
        </section>

        <!-- 3. AUFGABEN CHECKLISTE -->
        <section class="card">
          <h2>🎯 Aufgaben &amp; Checkliste in <code>aufgabe.html</code></h2>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t1">
            <label class="task-label" for="t1"><strong>TODO 1:</strong> CSS-Variablen auf <code>:root</code> für das Light Theme anlegen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t2">
            <label class="task-label" for="t2"><strong>TODO 2:</strong> Theme-Variablen unter <code>[data-theme="dark"]</code> für den Dark Mode überschreiben.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t3">
            <label class="task-label" for="t3"><strong>TODO 3:</strong> <code>@media (prefers-color-scheme: dark)</code> für Systempräferenz anbinden.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t4">
            <label class="task-label" for="t4"><strong>TODO 4:</strong> CSS-Variablen in <code>body</code> und <code>.theme-card</code> einsetzen.</label>
          </div>
          <div class="task-item">
            <input type="checkbox" class="task-checkbox" id="t5">
            <label class="task-label" for="t5"><strong>TODO 5:</strong> Theme-Toggle-Logik in JavaScript implementieren.</label>
          </div>

          <div style="margin-top: 25px; display: flex; gap: 12px; flex-wrap: wrap;">
            <a href="../../../workspace.html?course=html_css&track=track_4_modern_ui_and_master&chapter=14_dark_mode_und_themes" class="btn" style="background: #6366f1; color: #fff; font-weight: 700;">💻 In Web-IDE öffnen &rarr;</a>
            <a href="../13_bem_methodik_und_modularitaet/index.html" class="btn btn-secondary">&larr; Zurück zu CSS 13</a>
            <a href="../15_moderne_ui_komponenten/index.html" class="btn btn-secondary">Weiter zu CSS 15 &rarr;</a>
          </div>
        </section>
      </main>
    </div>
  </div>
  <script src="../../../assets/courses_manifest.js"></script>
  <script src="../../../assets/course_sidebar.js"></script>
</body>
</html>