dom darkmode

css/style.css

@@ -332,20 +332,35 @@ input#punkteInput {
    DARK MODE (WICHTIG: AUSSERHALB MEDIA QUERY)
 ================================ */
 
+
 body.dark {
+  background-color: #1e293b;
+  color: #e2e8f0;
   --cream: #120d14;
   --text: #f5e9f2;
   --muted: #c7b2c9;
-
-  background: var(--cream);
-  color: var(--text);
 }
 
 body.dark nav {
-  background: rgba(18, 13, 20, 0.85);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  background-color: #0f172a;
+  border-color: #334155;
 }
 
+body.dark a {
+  color: #60a5fa;
+}
+
+
+
+
+
+
+
+
+
+
+
+
 body.dark .stat-card,
 body.dark .gallery-card {
   background: #1b141d;

eis_projekt.html

@@ -27,7 +27,7 @@
   <li><a href="kontakt.html">Kontakt</a></li>
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
-<button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
+<button id="dark-mode-toggle">🌙 Dark Mode</button>
 </nav>
 
 <section class="hero">

impressum.html

@@ -28,7 +28,7 @@
   <li><a href="kontakt.html">Kontakt</a></li>
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
-<button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
+<button id="dark-mode-toggle">🌙 Dark Mode</button>
 </nav>
 
 <section class="hero">

index.html

@@ -25,8 +25,7 @@
   <li><a href="kontakt.html">Kontakt</a></li>
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
-<button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
-
+<button id="dark-mode-toggle">🌙 Dark Mode</button>
    </nav>
 
 <div class="hero">

js/script.js

@@ -1,20 +1,20 @@
-document.querySelector("form")?.addEventListener("submit", function (e) {
-  e.preventDefault();
-  alert("Nachricht gesendet 💖");
-});
+document.addEventListener("DOMContentLoaded", () => {
+  const toggle = document.getElementById("dark-mode-toggle");
 
-function toggleDarkMode() {
-  document.body.classList.toggle("dark");
-
-  if (document.body.classList.contains("dark")) {
-    localStorage.setItem("theme", "dark");
-  } else {
-    localStorage.setItem("theme", "light");
-  }
-}
-
-window.addEventListener("load", () => {
-  if (localStorage.getItem("theme") === "dark") {
+  // gespeicherten Zustand laden
+  if (localStorage.getItem("darkMode") === "true") {
     document.body.classList.add("dark");
+    toggle.textContent = "Light Mode";
   }
+
+  toggle.addEventListener("click", () => {
+    document.body.classList.toggle("dark");
+
+    const isDark = document.body.classList.contains("dark");
+
+    localStorage.setItem("darkMode", isDark);
+
+    // Button Text ändern
+    toggle.textContent = isDark ? "Light Mode" : "Dark Mode";
+  });
 });

kontakt.html

@@ -27,7 +27,7 @@
   <li><a href="kontakt.html">Kontakt</a></li>
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
-  <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
+ <button id="dark-mode-toggle">🌙 Dark Mode</button>
 
 </button>
 </nav>

notenrechner.html

@@ -28,7 +28,7 @@
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
 
-  <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
+<button id="dark-mode-toggle">🌙 Dark Mode</button>
 </nav>
 
 <section class="hero">

textanalyse.html

@@ -28,7 +28,7 @@
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
 
-  <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
+ <button id="dark-mode-toggle">🌙 Dark Mode</button>
 </nav>
 
 <section class="hero">

ueber_uns.html

@@ -45,18 +45,7 @@ window.onload = function () {
   <li><a href="kontakt.html">Kontakt</a></li>
   <li><a href="impressum.html">Impressum</a></li>
 </ul>
-  <button onclick="toggleDarkMode()"
-style="
-  background: transparent;
-  border: 1px solid rgba(232,103,154,0.4);
-  color: var(--rose);
-  padding: 6px 12px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 0.8rem;
-">
-🌙 Mode
-</button>
+<button id="dark-mode-toggle">🌙 Dark Mode</button>
 </nav>
 
 <section class="hero">