public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark mode js demo on chapter 3 slide

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 12:54:52 +02:00
parent 0367f07166
commit 754ff9436c
4 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
slides/223015c/03-interaktivitaet-javascript.md
View File

@@ -755,6 +755,8 @@ Formular-Validierung ohne Reload
# Beispiel: Toggle Dark Mode
![bg right:35%](./assets/demos/js-darkmode.png)
```javascript
const toggleButton = document.querySelector("#darkModeToggle");
const body = document.body;

34
slides/223015c/assets/demos/js-darkmode-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Dark Mode</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/darkmode.html</span>
</div>
<iframe src="./js-darkmode.html"></iframe>
</div>
</div>
</body>
</html>

49
slides/223015c/assets/demos/js-darkmode.html Normal file
View File

@@ -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>

BIN
slides/223015c/assets/demos/js-darkmode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB