107 lines
2.5 KiB
JavaScript
107 lines
2.5 KiB
JavaScript
// Dark Mode
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const toggle = document.getElementById("dark-mode-toggle");
|
|
|
|
// Falls kein Button existiert → nichts tun
|
|
if (!toggle) return;
|
|
|
|
// Zustand laden
|
|
const isDarkSaved = localStorage.getItem("darkMode") === "true";
|
|
|
|
if (isDarkSaved) {
|
|
document.body.classList.add("dark");
|
|
}
|
|
|
|
// Button korrekt initial setzen
|
|
updateButton(toggle);
|
|
|
|
// Klick Event
|
|
toggle.addEventListener("click", () => {
|
|
document.body.classList.toggle("dark");
|
|
|
|
const isDark = document.body.classList.contains("dark");
|
|
|
|
// speichern
|
|
localStorage.setItem("darkMode", isDark);
|
|
|
|
// Button updaten
|
|
updateButton(toggle);
|
|
});
|
|
});
|
|
|
|
// 🔁 zentrale Funktion für alle Seiten
|
|
function updateButton(toggle) {
|
|
const isDark = document.body.classList.contains("dark");
|
|
|
|
// Wenn du TEXT willst:
|
|
toggle.textContent = isDark ? "☀️" : "🌙";
|
|
|
|
// OPTIONAL: falls du lieber Text willst statt Icons:
|
|
// toggle.textContent = isDark ? "Light Mode" : "Dark Mode";
|
|
}
|
|
|
|
|
|
// Dein bisheriger Code
|
|
|
|
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);
|
|
}
|
|
|
|
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();
|