multithame

html/script.js

@@ -0,0 +1,68 @@
+/* ==========================================
+   NAVIGATION & MOBILE MENU
+   ========================================== */
+function toggleHamburger() {
+    const navLinks = document.getElementById('navLinks');
+    const hamburger = document.querySelector('.hamburger');
+    navLinks.classList.toggle('mobile-open');
+    hamburger.classList.toggle('active');
+}
+
+/* ==========================================
+   THEME SWITCHER LOGIC
+   ========================================== */
+const themeBtn = document.getElementById('themeBtn');
+const themeDropdown = document.getElementById('themeDropdown');
+const themeButtons = document.querySelectorAll('.theme-dropdown button');
+const htmlEl = document.documentElement;
+
+// Dropdown öffnen/schließen
+if (themeBtn) {
+    themeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        themeDropdown.classList.toggle('show');
+    });
+}
+
+// Theme auswählen
+themeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const theme = btn.getAttribute('data-theme');
+        applyTheme(theme);
+        themeDropdown.classList.remove('show');
+    });
+});
+
+// Theme anwenden
+function applyTheme(theme) {
+    if (theme === 'auto') {
+        localStorage.removeItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+        themeBtn.innerHTML = '🌓';
+    } else {
+        htmlEl.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
+    }
+}
+
+// Initialisierung beim Laden
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    applyTheme(savedTheme);
+});
+
+// Klick außerhalb schließt Dropdown
+window.addEventListener('click', () => {
+    if (themeDropdown) themeDropdown.classList.remove('show');
+});
+
+// Mobile Menü schließen bei Klick auf Link
+document.querySelectorAll('.nav-links a').forEach(link => {
+    link.addEventListener('click', () => {
+        document.getElementById('navLinks').classList.remove('mobile-open');
+        const hamburger = document.querySelector('.hamburger');
+        if (hamburger) hamburger.classList.remove('active');
+    });
+});