@php
    $dark = "document.documentElement.classList.contains('dark')";
@endphp

<button
    type="button"
    x-data="{ dark: {{ $dark }} }"
    x-init="$watch('dark', value => { document.documentElement.classList.toggle('dark', value); localStorage.setItem('theme', value ? 'dark' : 'light'); })"
    @click="dark = ! dark"
    class="inline-flex items-center justify-center p-2 rounded-md text-text-muted hover:text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150"
    :aria-label="dark ? 'Activer le mode clair' : 'Activer le mode sombre'"
    :aria-pressed="dark.toString()"
>
    <svg x-show="! dark" x-cloak aria-hidden="true" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
    <svg x-show="dark" x-cloak aria-hidden="true" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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" />
    </svg>
</button>