diff --git a/resources/js/app.js b/resources/js/app.js index a8093be..c931314 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -5,3 +5,33 @@ import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start(); + +document.addEventListener('DOMContentLoaded', () => { + const themeToggleBtn = document.getElementById('theme-toggle'); + const darkIcon = document.getElementById('theme-toggle-dark-icon'); + const lightIcon = document.getElementById('theme-toggle-light-icon'); + + if (!themeToggleBtn) return; + + // Ustawienie odpowiedniej ikony przy starcie + if (document.documentElement.classList.contains('dark')) { + lightIcon.classList.remove('hidden'); + } else { + darkIcon.classList.remove('hidden'); + } + + themeToggleBtn.addEventListener('click', () => { + // Przełączanie ikon + darkIcon.classList.toggle('hidden'); + lightIcon.classList.toggle('hidden'); + + // Przełączanie klasy w i zapis w localStorage + if (document.documentElement.classList.contains('dark')) { + document.documentElement.classList.remove('dark'); + localStorage.setItem('color-theme', 'light'); + } else { + document.documentElement.classList.add('dark'); + localStorage.setItem('color-theme', 'dark'); + } + }); +}); diff --git a/resources/views/components/application-logo.blade.php b/resources/views/components/application-logo.blade.php index fa01a72..539da46 100644 --- a/resources/views/components/application-logo.blade.php +++ b/resources/views/components/application-logo.blade.php @@ -2,12 +2,11 @@
merge(['class' => 'h-9 w-auto block']) }}>
+ class="h-9 w-auto block [filter:brightness(0)] dark:[filter:brightness(0)_invert(1)]">