51 lines
1.8 KiB
PHP
Executable File
51 lines
1.8 KiB
PHP
Executable File
<section class="w-full">
|
|
@include('partials.settings-heading')
|
|
|
|
<flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
|
|
|
|
<x-settings.layout
|
|
:heading="__('Appearance')"
|
|
:subheading="__('Update the appearance settings for your account')"
|
|
>
|
|
<div
|
|
class="hd-appearance-switch"
|
|
role="group"
|
|
aria-label="{{ __('Appearance') }}"
|
|
x-data
|
|
>
|
|
<button
|
|
type="button"
|
|
class="hd-appearance-choice"
|
|
:class="{ 'is-active': $flux.appearance === 'light' }"
|
|
:aria-pressed="$flux.appearance === 'light'"
|
|
@click="$flux.appearance = 'light'"
|
|
>
|
|
<i class="fa-regular fa-sun" aria-hidden="true"></i>
|
|
<span>{{ __('Light') }}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="hd-appearance-choice"
|
|
:class="{ 'is-active': $flux.appearance === 'dark' }"
|
|
:aria-pressed="$flux.appearance === 'dark'"
|
|
@click="$flux.appearance = 'dark'"
|
|
>
|
|
<i class="fa-regular fa-moon" aria-hidden="true"></i>
|
|
<span>{{ __('Dark') }}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="hd-appearance-choice"
|
|
:class="{ 'is-active': $flux.appearance === 'system' }"
|
|
:aria-pressed="$flux.appearance === 'system'"
|
|
@click="$flux.appearance = 'system'"
|
|
>
|
|
<i class="fa-solid fa-desktop" aria-hidden="true"></i>
|
|
<span>{{ __('System') }}</span>
|
|
</button>
|
|
</div>
|
|
</x-settings.layout>
|
|
</section>
|