mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 11:31:09 -05:00
28 lines
1.3 KiB
PHP
28 lines
1.3 KiB
PHP
<button
|
|
wire:click="toggleTheme"
|
|
class="p-2 text-gray-300 transition-all duration-200 hover:text-white hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg"
|
|
aria-label="Toggle dark mode"
|
|
title="{{ $isDark ? 'Switch to light mode' : 'Switch to dark mode' }}"
|
|
>
|
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@if($isDark)
|
|
<!-- Sun icon -->
|
|
<path d="M12 3v1m0 16v1m-8-9H3m18 0h-1m-2.293-6.293l-.707-.707M6.707 17.707l-.707.707M17.707 17.707l.707.707M6.707 6.707l-.707-.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@else
|
|
<!-- Moon icon -->
|
|
<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@endif
|
|
</svg>
|
|
</button>
|
|
|
|
<script>
|
|
document.addEventListener('livewire:init', () => {
|
|
Livewire.on('theme-changed', ({ theme }) => {
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
});
|
|
});
|
|
</script> |