Update index.html

ChristianHohlfeld · web-flow · commit 4ca42f1a7f81 · 2024-11-20T16:57:49.000+01:00
diff --git a/index.html b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
-<html lang="de">
-
+<html lang="de" data-theme="cupcake">
 <head>
     <script type="application/ld+json">
     {
@@ -78,29 +77,32 @@
     <!-- Canonical Tag -->
     <link rel="canonical" href="https://skillcoins.de/">
 
+    <!-- DaisyUI und TailwindCSS -->
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/keycloak-js@latest/dist/keycloak.min.js"></script>
 
     <link rel="icon" href="favicon.ico" type="image/x-icon">
     <style>
-        /* Dein CSS bleibt unverändert */
-        html,
-        body {
+        /* Basis-Stile */
+        html, body {
             font-family: 'Inter', sans-serif;
         }
 
-        /* Weitere benutzerdefinierte Styles können hier hinzugefügt werden */
+        /* Optional: Anpassungen für den Hero */
+        .hero {
+            background-color: var(--bg-base-100);
+        }
     </style>
 </head>
 
-<body class="static-gradient min-h-screen flex flex-col">
+<body class="min-h-screen flex flex-col">
 
     <!-- Header -->
-    <header class="sticky-header bg-white shadow-md">
+    <header class="navbar bg-white shadow-md sticky top-0 z-50">
         <div class="container mx-auto flex justify-between items-center py-2 px-4">
             <!-- Logo Text -->
-            <div class="logo-text text-2xl font-bold text-gray-800">skillcoins.de</div>
+            <div class="text-2xl font-bold text-gray-800">skillcoins.de</div>
             <div class="flex items-center space-x-4">
                 <!-- Dark Mode Toggle -->
                 <button id="theme-toggle" class="btn btn-ghost">
@@ -200,12 +202,11 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
 
             // Dark Mode Toggle Funktionalität
             function applyTheme(theme) {
+                document.documentElement.setAttribute('data-theme', 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');
                 }
@@ -217,22 +218,17 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
                 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');
+                    // Falls kein gespeichertes Theme vorhanden ist, das Standard-Theme verwenden (cupcake)
+                    applyTheme('cupcake');
                 }
             }
 
             // 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');
-                }
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const newTheme = currentTheme === 'dark' ? 'cupcake' : 'dark';
+                applyTheme(newTheme);
+                localStorage.setItem('theme', newTheme);
             });
 
             // Initialisieren des Themes beim Laden der Seite
@@ -277,5 +273,4 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
     </script>
 
 </body>
-
 </html>
