Theme Mode Toggle code

@props([
    'class' => '',
])

<button
    type="button"
    @click="$store.theme.toggle()"
    :aria-pressed="$store.theme.isDark"
    :title="$store.theme.isDark ? '{{ __('Switch to light mode') }}' : '{{ __('Switch to dark mode') }}'"
    aria-label="{{ __('Toggle dark mode') }}"
    {{ $attributes->merge(['class' => 'inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900 '.$class]) }}
>
    <i class="ph-fill ph-sun text-lg" x-show="$store.theme.isDark" x-cloak></i>
    <i class="ph-fill ph-moon text-lg" x-show="! $store.theme.isDark" x-cloak></i>
</button>