38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import './bootstrap';
|
|
|
|
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 <html> 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');
|
|
}
|
|
});
|
|
});
|