add darkmode to imprint

2025-09-20 19:51:25 +02:00
parent 13b4383977
commit 82635a94e3
2 changed files with 28 additions and 2 deletions
@@ -5,11 +5,12 @@
    <title>20 Jahre Abitur 2007</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script defer src="/lib/alpinejs.min.js"></script>
    <link rel="stylesheet" href="/lib/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css" />
 </head>

-<body>
+<body x-data="imprintApp()" :data-bs-theme="darkMode ? 'dark' : 'light'">
    <div class="container mt-5">
        <div class="card shadow">
            <div class="card-body">
@@ -91,6 +92,31 @@
            </div>
        </div>
    </div>
+
+    <script>
+        function imprintApp() {
+            return {
+                darkMode: false,
+                
+                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;
+                    }
+                    
+                    // Listen for system theme changes
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                        if (localStorage.getItem('darkMode') === null) {
+                            this.darkMode = e.matches;
+                        }
+                    });
+                }
+            }
+        }
+    </script>
 </body>

 </html>