Darkmode

2026-03-23 22:36:32 +01:00
parent cb667cb048
commit 7bca90b17c
4 changed files with 482 additions and 163 deletions
--- a/views/footer.ejs
+++ b/views/footer.ejs
@@ -1,3 +1,83 @@
  <footer class="app-footer">
    Made with &#10084;&#65039; by Carsten Graf
  </footer>
+  <script>
+    (function() {
+      var THEME_KEY = 'theme';
+
+      function getSystemTheme() {
+        return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+      }
+
+      function getPreferredTheme() {
+        var storedTheme = localStorage.getItem(THEME_KEY);
+        return storedTheme || getSystemTheme();
+      }
+
+      function applyTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        var toggleBtn = document.getElementById('themeToggle');
+        if (toggleBtn) {
+          var isDark = theme === 'dark';
+          toggleBtn.setAttribute('aria-pressed', String(isDark));
+          toggleBtn.textContent = isDark ? '☀ Hell' : '🌙 Dunkel';
+          toggleBtn.setAttribute('title', isDark ? 'Zu hellem Design wechseln' : 'Zu dunklem Design wechseln');
+        }
+      }
+
+      function toggleTheme() {
+        var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        var nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        localStorage.setItem(THEME_KEY, nextTheme);
+        applyTheme(nextTheme);
+      }
+
+      function ensureToggleButton() {
+        if (document.getElementById('themeToggle')) {
+          return;
+        }
+
+        var navRight = document.querySelector('.nav-right');
+
+        var toggleBtn = document.createElement('button');
+        toggleBtn.id = 'themeToggle';
+        toggleBtn.type = 'button';
+        toggleBtn.className = 'theme-toggle-btn';
+        toggleBtn.setAttribute('aria-label', 'Farbschema umschalten');
+        toggleBtn.addEventListener('click', toggleTheme);
+
+        if (navRight) {
+          var logoutButton = navRight.querySelector('.btn-logout');
+          if (logoutButton) {
+            navRight.insertBefore(toggleBtn, logoutButton);
+          } else {
+            navRight.appendChild(toggleBtn);
+          }
+        } else {
+          toggleBtn.classList.add('theme-toggle-floating');
+          document.body.appendChild(toggleBtn);
+        }
+
+        applyTheme(document.documentElement.getAttribute('data-theme') || getPreferredTheme());
+      }
+
+      try {
+        applyTheme(getPreferredTheme());
+      } catch (err) {
+        applyTheme('light');
+      }
+
+      document.addEventListener('DOMContentLoaded', function() {
+        ensureToggleButton();
+
+        var mediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+        if (mediaQuery && typeof mediaQuery.addEventListener === 'function') {
+          mediaQuery.addEventListener('change', function() {
+            if (!localStorage.getItem(THEME_KEY)) {
+              applyTheme(getSystemTheme());
+            }
+          });
+        }
+      });
+    })();
+  </script>