dark/light mode

2026-02-28 14:08:30 +02:00
parent 90f492808c
commit 8ab2d5048b
3 changed files with 697 additions and 353 deletions
@@ -189,7 +189,12 @@
                            </div>
                        </form>

-                        <div class="d-flex align-items-center">
+                        <div class="d-flex align-items-center gap-3">
+                            <!-- Theme Toggle Button -->
+                            <button type="button" class="theme-toggle-btn" id="themeToggle" aria-label="Toggle theme">
+                                <i class="fas fa-moon" id="themeIcon"></i>
+                            </button>
+
                            @auth
                                <div class="dropdown">
                                    <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
@@ -249,6 +254,48 @@

        <!-- Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+        <!-- Theme Toggle Script -->
+        <script>
+            // Theme management
+            (function() {
+                const themeToggle = document.getElementById('themeToggle');
+                const themeIcon = document.getElementById('themeIcon');
+                const htmlElement = document.documentElement;
+
+                // Get saved theme or default to dark
+                const savedTheme = localStorage.getItem('theme') || 'dark';
+
+                // Apply theme on load
+                function applyTheme(theme) {
+                    htmlElement.setAttribute('data-theme', theme);
+
+                    // Update icon
+                    if (theme === 'dark') {
+                        themeIcon.classList.remove('fa-sun');
+                        themeIcon.classList.add('fa-moon');
+                    } else {
+                        themeIcon.classList.remove('fa-moon');
+                        themeIcon.classList.add('fa-sun');
+                    }
+                }
+
+                // Apply saved theme immediately
+                applyTheme(savedTheme);
+
+                // Toggle theme on button click
+                if (themeToggle) {
+                    themeToggle.addEventListener('click', function() {
+                        const currentTheme = htmlElement.getAttribute('data-theme');
+                        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+                        applyTheme(newTheme);
+                        localStorage.setItem('theme', newTheme);
+                    });
+                }
+            })();
+        </script>
+
        @stack('scripts')
    </body>
 </html>