ergänzung dark mode

js/script.js

@@ -1,43 +1,99 @@
+// Dark Mode
+document.addEventListener("DOMContentLoaded", () => {
+    const toggle = document.getElementById("dark-mode-toggle");
+
+    // Falls der Button nicht existiert, abbrechen
+    if (!toggle) return;
+
+    // Gespeicherten Zustand laden
+    if (localStorage.getItem("darkMode") === "true") {
+        document.body.classList.add("dark");
+        toggle.textContent = "Light Mode";
+    } else {
+        toggle.textContent = "Dark Mode";
+    }
+
+    // Klick auf Button
+    toggle.addEventListener("click", () => {
+        document.body.classList.toggle("dark");
+
+        const isDark = document.body.classList.contains("dark");
+
+        // Zustand speichern
+        localStorage.setItem("darkMode", isDark);
+
+        // Button-Text ändern
+        if (isDark) {
+            toggle.textContent = "Light Mode";
+        } else {
+            toggle.textContent = "Dark Mode";
+        }
+    });
+});
+
+
+// Dein bisheriger Code
 console.log("Meine Seite läuft!");
 
-    const canvas = document.getElementById('bg');
-    const ctx = canvas.getContext('2d');
-    let W, H, particles = [];
-    function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }
-    function createParticles() {
-      particles = [];
-      const count = Math.floor(W * H / 6500);
-      for (let i = 0; i < count; i++) {
-        particles.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*1.8+0.4,
-          dx: (Math.random()-0.5)*0.3, dy: (Math.random()-0.5)*0.3, alpha: Math.random()*0.5+0.1 });
-      }
+const canvas = document.getElementById('bg');
+const ctx = canvas.getContext('2d');
+let W, H, particles = [];
+
+function resize() {
+    W = canvas.width = canvas.offsetWidth;
+    H = canvas.height = canvas.offsetHeight;
+}
+
+function createParticles() {
+    particles = [];
+    const count = Math.floor(W * H / 6500);
+
+    for (let i = 0; i < count; i++) {
+        particles.push({
+            x: Math.random() * W,
+            y: Math.random() * H,
+            r: Math.random() * 1.8 + 0.4,
+            dx: (Math.random() - 0.5) * 0.3,
+            dy: (Math.random() - 0.5) * 0.3,
+            alpha: Math.random() * 0.5 + 0.1
+        });
     }
-    function drawBg() {
-      const g = ctx.createRadialGradient(W*0.3, H*0.4, 0, W*0.3, H*0.4, W*0.85);
-      g.addColorStop(0, '#0057c2'); g.addColorStop(0.5, '#001f44'); g.addColorStop(1, '#000d22');
-      ctx.fillStyle = g; ctx.fillRect(0,0,W,H);
-      const g2 = ctx.createRadialGradient(W*0.82, H*0.72, 0, W*0.82, H*0.72, W*0.5);
-      g2.addColorStop(0, 'rgba(0,55,150,0.45)'); g2.addColorStop(1, 'transparent');
-      ctx.fillStyle = g2; ctx.fillRect(0,0,W,H);
-    }
-    function animate() {
-      ctx.clearRect(0,0,W,H); drawBg();
-      ctx.lineWidth = 1;
-      for (let i = 0; i < particles.length; i++) {
-        for (let j = i+1; j < particles.length; j++) {
-          const dx = particles[i].x-particles[j].x, dy = particles[i].y-particles[j].y;
-          const d = Math.sqrt(dx*dx+dy*dy);
-          if (d < 120) { ctx.globalAlpha = (1-d/120)*0.12; ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.stroke(); }
-        }
-      }
-      ctx.globalAlpha = 1;
-      particles.forEach(p => {
-        p.x+=p.dx; p.y+=p.dy;
-        if(p.x<0||p.x>W) p.dx*=-1; if(p.y<0||p.y>H) p.dy*=-1;
-        ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
-        ctx.fillStyle=`rgba(255,255,255,${p.alpha})`; ctx.fill();
-      });
-      requestAnimationFrame(animate);
-    }
-    window.addEventListener('resize', ()=>{ resize(); createParticles(); });
-    resize(); createParticles(); animate();
+}
+
+function drawBg() {
+    const g = ctx.createRadialGradient(W * 0.3, H * 0.4, 0, W * 0.3, H * 0.4, W * 0.85);
+    g.addColorStop(0, '#0057c2');
+    g.addColorStop(0.5, '#001f44');
+    g.addColorStop(1, '#000d22');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, W, H);
+}
+
+function animate() {
+    ctx.clearRect(0, 0, W, H);
+    drawBg();
+
+    particles.forEach(p => {
+        p.x += p.dx;
+        p.y += p.dy;
+
+        if (p.x < 0 || p.x > W) p.dx *= -1;
+        if (p.y < 0 || p.y > H) p.dy *= -1;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255,255,255,${p.alpha})`;
+        ctx.fill();
+    });
+
+    requestAnimationFrame(animate);
+}
+
+window.addEventListener('resize', () => {
+    resize();
+    createParticles();
+});
+
+resize();
+createParticles();
+animate();