Light- und Darkmode hinzugefügt

bin/main/static/js/topbar.js

@@ -1,6 +1,16 @@
 (function () {
     if (document.querySelector('.topbar')) return;
 
+    function _applyTheme(theme) {
+        window._applyTheme ? window._applyTheme(theme) : document.documentElement.setAttribute('data-theme', theme);
+    }
+
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
+        if (!localStorage.getItem('xxx-theme')) {
+            _applyTheme(e.matches ? 'light' : 'dark');
+        }
+    });
+
     function esc(s) {
         return String(s ?? '')
             .replace(/&/g, '&amp;').replace(/</g, '&lt;')
@@ -99,6 +109,13 @@
                         <a id="topbarProfileLink" href="/community/benutzer.html" class="topbar-profile-link">
                             <span>${IC('PROFILE')}</span> Mein Profil
                         </a>
+                        <label class="topbar-profile-link topbar-theme-row" title="Dark / Light Mode">
+                            <span>☾ Dark Mode</span>
+                            <span class="toggle-switch" style="gap:0;">
+                                <input type="checkbox" id="topbarDarkModeCheck">
+                                <span class="toggle-track"></span>
+                            </span>
+                        </label>
                         <a href="/konto/einstellungen.html" class="topbar-profile-link">
                             <span>${IC('SETTINGS')}</span> Einstellungen
                         </a>
@@ -139,10 +156,37 @@
                 }
                 const profileLink = document.getElementById('topbarProfileLink');
                 if (profileLink && user.userId) profileLink.href = '/community/benutzer.html?userId=' + user.userId;
+
+                // Theme aus DB anwenden (überschreibt OS-Fallback aus nav.js)
+                let theme;
+                if (user.darkMode === true)       { theme = 'dark';  localStorage.setItem('xxx-theme', 'dark'); }
+                else if (user.darkMode === false)  { theme = 'light'; localStorage.setItem('xxx-theme', 'light'); }
+                else { // null → OS-Präferenz, localStorage-Cache löschen
+                    localStorage.removeItem('xxx-theme');
+                    theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+                }
+                _applyTheme(theme);
+                setupDarkModeCheckbox(theme === 'dark');
             })
             .catch(() => {});
     }
 
+    function setupDarkModeCheckbox(isDark) {
+        const cb = document.getElementById('topbarDarkModeCheck');
+        if (!cb) return;
+        cb.checked = isDark;
+        cb.addEventListener('change', () => {
+            const dark = cb.checked;
+            _applyTheme(dark ? 'dark' : 'light');
+            localStorage.setItem('xxx-theme', dark ? 'dark' : 'light');
+            fetch('/user/me/theme', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ darkMode: dark })
+            }).catch(() => {});
+        });
+    }
+
     // ── Suche ──
     function setupSearch() {
         const input   = document.getElementById('topbarSearchInput');