Skip to content

Commit df55b1f

Browse files
ChristianHohlfeldChristianHohlfeld
authored
Update index.html
1 parent 707129c commit df55b1f

File tree

1 file changed

+38
-21
lines changed

1 file changed

+38
-21
lines changed

‎index.html‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -103,21 +103,31 @@
103103
<!-- Header als DaisyUI Navbar -->
104104
<header class="navbar bg-base-100 shadow-md sticky top-0 z-50">
105105
<div class="container mx-auto flex justify-between items-center">
106-
<!-- Logo -->
106+
<!-- Navbar start: Logo -->
107107
<a href="/" class="btn btn-ghost normal-case text-xl">skillcoins.de</a>
108+
109+
<!-- Navbar end: Dark Mode Toggle und Logout Button -->
108110
<div class="flex items-center space-x-4">
109-
<!-- Dark Mode Toggle -->
110-
<button id="theme-toggle" class="btn btn-ghost">
111-
<svg id="theme-toggle-light-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor"
112-
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
113-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
114-
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>
111+
<!-- Dark Mode Toggle (Swap Component) -->
112+
<label class="swap swap-rotate">
113+
<!-- Hidden Checkbox -->
114+
<input type="checkbox" id="theme-toggle-checkbox" />
115+
116+
<!-- Sun Icon (Light Mode) -->
117+
<svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg"
118+
viewBox="0 0 24 24">
119+
<path
120+
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
115121
</svg>
116-
<svg id="theme-toggle-dark-icon" class="w-6 h-6 hidden" fill="currentColor" stroke="none"
117-
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
118-
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
122+
123+
<!-- Moon Icon (Dark Mode) -->
124+
<svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg"
125+
viewBox="0 0 24 24">
126+
<path
127+
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
119128
</svg>
120-
</button>
129+
</label>
130+
121131
<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
122132
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
123133
</div>
@@ -158,7 +168,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
158168
document.addEventListener('DOMContentLoaded', function () {
159169
const registerButton = document.getElementById('register-button');
160170
const logoutButton = document.getElementById('keycloak-logout');
161-
const themeToggle = document.getElementById('theme-toggle');
171+
const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
162172
const lightIcon = document.getElementById('theme-toggle-light-icon');
163173
const darkIcon = document.getElementById('theme-toggle-dark-icon');
164174
const statusContainer = document.getElementById('status-container');
@@ -197,7 +207,8 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
197207
function updateUIOnLogout() {
198208
registerButton.classList.remove('hidden');
199209
logoutButton.classList.add('hidden');
200-
statusContainer.classList.remove('alert-success', 'alert-error', 'hidden');
210+
statusContainer.classList.remove('alert-success', 'alert-error');
211+
statusContainer.classList.add('alert-info', 'hidden');
201212
statusText.textContent = 'Nicht eingeloggt.';
202213
}
203214

@@ -207,29 +218,35 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
207218
if (theme === 'dark') {
208219
darkIcon.classList.remove('hidden');
209220
lightIcon.classList.add('hidden');
221+
themeToggleCheckbox.checked = true;
210222
} else {
211223
darkIcon.classList.add('hidden');
212224
lightIcon.classList.remove('hidden');
225+
themeToggleCheckbox.checked = false;
213226
}
214227
}
215228

216-
// Überprüfen und Anwenden des Themes basierend auf localStorage
229+
// Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
217230
function initializeTheme() {
218231
const storedTheme = localStorage.getItem('theme');
219232
if (storedTheme) {
220233
applyTheme(storedTheme);
221234
} else {
222-
// Falls kein gespeichertes Theme vorhanden ist, das Standard-Theme verwenden (cupcake)
223-
applyTheme('cupcake');
235+
// Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
236+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
237+
applyTheme(prefersDark ? 'dark' : 'cupcake');
224238
}
225239
}
226240

227241
// Event Listener für den Dark Mode Toggle Button
228-
themeToggle.addEventListener('click', function () {
229-
const currentTheme = document.documentElement.getAttribute('data-theme');
230-
const newTheme = currentTheme === 'dark' ? 'cupcake' : 'dark';
231-
applyTheme(newTheme);
232-
localStorage.setItem('theme', newTheme);
242+
themeToggleCheckbox.addEventListener('change', function () {
243+
if (this.checked) {
244+
applyTheme('dark');
245+
localStorage.setItem('theme', 'dark');
246+
} else {
247+
applyTheme('cupcake');
248+
localStorage.setItem('theme', 'cupcake');
249+
}
233250
});
234251

235252
// Initialisieren des Themes beim Laden der Seite

0 commit comments

Comments
 (0)