dark mode on load

2025-09-21 16:25:57 +02:00
parent a5a608958a
commit abf66e0bf9
3 changed files with 22 additions and 9 deletions
@@ -118,7 +118,13 @@ footer {
 }

 [data-bs-theme="dark"] .dark-mode-toggle {
-    color: #dba50e;
+    color: #ab810e;
+    background-color: #adb5bd;
+}
+
+[data-bs-theme="light"] .dark-mode-toggle {
+    color: var(--bs-body-bg);
+    background-color: #495057;
 }

 [data-bs-theme="dark"] .btn-outline-dark {
@@ -1,5 +1,16 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
+<script>
+(() => {
+    const isDark = localStorage.getItem('darkMode') === 'true' || 
+                   (localStorage.getItem('darkMode') === null && 
+                    window.matchMedia('(prefers-color-scheme: dark)').matches);
+    
+    if (isDark) {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+})();
+</script>

 <head>
    <title>20 Jahre Abitur 2007</title>
@@ -430,13 +441,9 @@

                // Initialize dark mode
                init() {
-                    // Check for saved preference or default to system preference
-                    const savedTheme = localStorage.getItem('darkMode');
-                    if (savedTheme !== null) {
-                        this.darkMode = savedTheme === 'true';
-                    } else {
-                        this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    }
+                    // Sync with the theme already applied to prevent mismatch
+                    const isDarkApplied = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+                    this.darkMode = isDarkApplied;

                    // Listen for system theme changes
                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {