Light Modus eingefügt

css/style.css

@@ -15,6 +15,20 @@
     --border: #1f2a44;
 }
 
+/* Light Mode */
+.light-mode {
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --surface-light: #e2e8f0;
+
+    --primary: #16a34a;
+    --accent: #2563eb;
+
+    --text: #1e293b;
+    --muted: #64748b;
+
+    --border: #cbd5e1;
+}
 /* =========================
    GLOBAL RESET
 ========================= */
@@ -70,6 +84,15 @@ nav a:hover {
     color: #0b1220;
     transform: translateY(-2px);
 }
+/* =========================
+   Bottom light Version
+========================= */
+.theme-switch-container {
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    z-index: 1100;
+}
 
 /* =========================
    MAIN LAYOUT

eis_projekt.html

@@ -46,6 +46,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <h1>Sneaky Snack Snakes</h1>
 

impressum.html

@@ -23,6 +23,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main class="impressum">
 
     <h1>Impressum</h1>

index.html

@@ -30,6 +30,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <h1>Sneaky Snack Snakes</h1>
 	<img src="img/Sneaky_Snack_Snakes.png" alt="Sneaky Snack Snakes">

js/script.js

@@ -70,4 +70,28 @@ function startNotenrechner() {
 
     ausgabe.textContent =
         `${punkte} von ${max} Punkten (${prozent} %) = ${berechneNote(prozent)}`;
-}
+}
+// Light-/Dark-Mode
+
+document.addEventListener("DOMContentLoaded", () => {
+    const themeButton = document.getElementById("theme-toggle");
+
+    if (!themeButton) return;
+
+    if (localStorage.getItem("theme") === "light") {
+        document.body.classList.add("light-mode");
+        themeButton.textContent = "🌙 Dark Mode";
+    }
+
+    themeButton.addEventListener("click", () => {
+        document.body.classList.toggle("light-mode");
+
+        if (document.body.classList.contains("light-mode")) {
+            localStorage.setItem("theme", "light");
+            themeButton.textContent = "🌙 Dark Mode";
+        } else {
+            localStorage.setItem("theme", "dark");
+            themeButton.textContent = "☀️ Light Mode";
+        }
+    });
+});

kontakt.html

@@ -13,6 +13,11 @@
 		<a href="impressum.html">Impressum</a>
 	</nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main> 
 <h1>Sneaky Snack Snakes</h1>
 <p>Hier wird demnächst ein Kontaktformular eingefügt</p>

notenrechner.html

@@ -17,6 +17,11 @@
         <a href="impressum.html">Impressum</a>
     </nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <section id="notenrechner">
 

ueber_uns.html

@@ -13,6 +13,11 @@
 		<a href="impressum.html">Impressum</a>
 	</nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main> 
     <h1>Über uns</h1>