Light- und Darkmode hinzugefügt

bin/main/static/js/nav.js

@@ -1,4 +1,23 @@
 (function () {
+    // ── Theme-Init (synchron, vor allem anderen) ──────────────────────────────
+    window._applyTheme = function (theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+    };
+    (function () {
+        const saved = localStorage.getItem('xxx-theme');
+        if (saved === 'light' || saved === 'dark') {
+            window._applyTheme(saved);
+        } else {
+            const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+            window._applyTheme(prefersLight ? 'light' : 'dark');
+        }
+    })();
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function (e) {
+        if (!localStorage.getItem('xxx-theme')) {
+            window._applyTheme(e.matches ? 'light' : 'dark');
+        }
+    });
+
     const path = window.location.pathname;
     const I = window.IC || function () { return ''; };
 

bin/main/static/js/shared.js

@@ -496,8 +496,8 @@ function startPostEdit(cfg) {
             </div>`).join('')}
             <div style="display:flex;justify-content:space-between;align-items:center;margin-top:0.3rem;" onclick="event.stopPropagation()">
                 <button onmousedown="event.stopPropagation()" onclick="event.stopPropagation();${addOptionFn}('${postId}')" style="width:auto;margin:0;padding:0.3rem 0.75rem;font-size:0.8rem;">+ Option</button>
-                <label class="multi-toggle" onmousedown="event.stopPropagation()" onclick="event.stopPropagation()">
-                    <input type="checkbox" id="${prefix}mc-${postId}" ${data.multiChoice ? 'checked' : ''}> Mehrfachauswahl möglich
+                <label class="toggle-switch" onmousedown="event.stopPropagation()" onclick="event.stopPropagation()">
+                    <input type="checkbox" id="${prefix}mc-${postId}" ${data.multiChoice ? 'checked' : ''}><span class="toggle-track"></span> Mehrfachauswahl möglich
                 </label>
             </div>
         </div>`

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');