From 6848ed0875fe1e2899c69ed058b28bbd0a372a2e Mon Sep 17 00:00:00 2001 From: Tomasz Boruc Date: Wed, 26 Aug 2026 14:25:54 +0200 Subject: [PATCH] DarkMode --- resources/js/app.js | 30 +++++++++++ .../components/application-logo.blade.php | 5 +- resources/views/layouts/app.blade.php | 8 ++- resources/views/layouts/navigation.blade.php | 50 ++++++++++++++++--- resources/views/users/index.blade.php | 37 +++++++------- tailwind.config.js | 1 + 6 files changed, 104 insertions(+), 27 deletions(-) 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 @@
Logomerge(['class' => 'h-9 w-auto block']) }}> + class="h-9 w-auto block [filter:brightness(0)] dark:[filter:brightness(0)_invert(1)]">
- + OnLine
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 0a471a4..433c24d 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -6,7 +6,13 @@ {{ config('app.name', 'Laravel') }} - + diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php index 43e8f27..3b45722 100644 --- a/resources/views/layouts/navigation.blade.php +++ b/resources/views/layouts/navigation.blade.php @@ -1,4 +1,17 @@ -