50 lines
1.2 KiB
HTML
50 lines
1.2 KiB
HTML
<!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>
|