Update index.html

Author: ChristianHohlfeld

index.html

@@ -100,8 +100,20 @@
         <div class="container mx-auto flex-1 flex justify-between items-center px-4">
             <!-- Logo Text -->
             <a href="/" class="text-2xl font-bold text-gray-800">skillcoins.de</a>
-            <!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
-            <div>
+            <div class="flex items-center space-x-4">
+                <!-- Dark Mode Toggle -->
+                <button id="theme-toggle" class="btn btn-ghost">
+                    <svg id="theme-toggle-light-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor"
+                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 3v1m0 16v1m8.66-8.66h-1M4.34 12.34h-1m15.31 6.36l-.7-.7M6.34 6.34l-.7-.7m12.02 0l-.7.7M6.34 17.66l-.7.7M12 5a7 7 0 100 14 7 7 0 000-14z"></path>
+                    </svg>
+                    <svg id="theme-toggle-dark-icon" class="w-6 h-6 hidden" fill="currentColor" stroke="none"
+                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                    </svg>
+                </button>
+                <!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
                 <button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
             </div>
         </div>
@@ -132,6 +144,9 @@ <h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>
         document.addEventListener('DOMContentLoaded', function () {
             const registerButton = document.getElementById('register-button');
             const logoutButton = document.getElementById('keycloak-logout');
+            const themeToggle = document.getElementById('theme-toggle');
+            const lightIcon = document.getElementById('theme-toggle-light-icon');
+            const darkIcon = document.getElementById('theme-toggle-dark-icon');
             const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint
 
             // Initialize Keycloak
@@ -199,8 +214,45 @@ <h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>
                 console.error('Failed to initialize Keycloak:', err);
             });
 
-            // Überprüfen des Tokens beim Laden der Seite
-            checkToken();
+            // Dark Mode Toggle Funktionalität
+            function applyTheme(theme) {
+                if (theme === 'dark') {
+                    document.documentElement.classList.add('dark');
+                    darkIcon.classList.remove('hidden');
+                    lightIcon.classList.add('hidden');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    darkIcon.classList.add('hidden');
+                    lightIcon.classList.remove('hidden');
+                }
+            }
+
+            // Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
+            function initializeTheme() {
+                const storedTheme = localStorage.getItem('theme');
+                if (storedTheme) {
+                    applyTheme(storedTheme);
+                } else {
+                    // Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    applyTheme(prefersDark ? 'dark' : 'light');
+                }
+            }
+
+            // Event Listener für den Dark Mode Toggle Button
+            themeToggle.addEventListener('click', function () {
+                const isDark = document.documentElement.classList.contains('dark');
+                if (isDark) {
+                    applyTheme('light');
+                    localStorage.setItem('theme', 'light');
+                } else {
+                    applyTheme('dark');
+                    localStorage.setItem('theme', 'dark');
+                }
+            });
+
+            // Initialisieren des Themes beim Laden der Seite
+            initializeTheme();
         });
     </script>