add dark mode js demo on chapter 3 slide

2026-04-20 12:54:52 +02:00
parent 0367f07166
commit 754ff9436c
4 changed files with 85 additions and 0 deletions
--- a/slides/223015c/assets/demos/js-darkmode.html
+++ b/slides/223015c/assets/demos/js-darkmode.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Dark Mode Toggle</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      padding: 1.5rem;
+      transition: background .2s, color .2s;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border: 1px solid #9ca3af;
+      border-radius: 6px;
+      background: #f3f4f6;
+      cursor: pointer;
+    }
+    .dark-mode {
+      background: #1a1a1a;
+      color: #eee;
+    }
+    .dark-mode button {
+      background: #2a2a2a;
+      color: #eee;
+      border-color: #555;
+    }
+    h2 { margin-top: 0; }
+  </style>
+</head>
+<body class="dark-mode">
+  <h2>Hallo Welt!</h2>
+  <p>Diese Seite wechselt zwischen hellem und dunklem Modus.</p>
+  <button id="darkModeToggle">☀️ Light Mode</button>
+  <script>
+    const toggleButton = document.querySelector("#darkModeToggle");
+    const body = document.body;
+    toggleButton.addEventListener("click", () => {
+      body.classList.toggle("dark-mode");
+      if (body.classList.contains("dark-mode")) {
+        toggleButton.textContent = "☀️ Light Mode";
+      } else {
+        toggleButton.textContent = "🌙 Dark Mode";
+      }
+    });
+  </script>
+</body>
+</html>