21-11-2025

resources/views/partials/theme-toggle-script.blade.php

@@ -0,0 +1,38 @@
+<script>
+    // Theme Toggle Funktionalität
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+    const themeToggleText = document.getElementById('theme-toggle-text');
+    const html = document.documentElement;
+
+    // Theme aus localStorage laden oder Standard verwenden
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+
+    function updateThemeUI(theme) {
+        if (theme === 'dark') {
+            html.classList.add('dark');
+            themeToggleLightIcon.classList.remove('hidden');
+            themeToggleDarkIcon.classList.add('hidden');
+            themeToggleText.textContent = 'Hell';
+        } else {
+            html.classList.remove('dark');
+            themeToggleLightIcon.classList.add('hidden');
+            themeToggleDarkIcon.classList.remove('hidden');
+            themeToggleText.textContent = 'Dunkel';
+        }
+    }
+
+    // Initiales Theme setzen
+    updateThemeUI(savedTheme);
+
+    // Toggle Button Event
+    themeToggleBtn.addEventListener('click', () => {
+        const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        localStorage.setItem('theme', newTheme);
+        updateThemeUI(newTheme);
+    });
+</script>
+