38 lines
1.9 KiB
PHP
38 lines
1.9 KiB
PHP
|
<div
|
||
|
|
x-data="{
|
||
|
|
theme: localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value),
|
||
|
|
labels: @js(['light' => __('ui.light'), 'dark' => __('ui.dark'), 'system' => __('ui.system')]),
|
||
|
|
icons: { light: '☀', dark: '☾', system: '◐' },
|
||
|
|
choose(value) {
|
||
|
|
this.theme = value
|
||
|
|
window.dispatchEvent(new CustomEvent('theme-changed', { detail: value }))
|
||
|
|
},
|
||
|
|
}"
|
||
|
|
x-on:theme-changed.window="theme = $event.detail"
|
||
|
|
>
|
||
|
|
<x-filament::dropdown placement="bottom-end" teleport>
|
||
|
|
<x-slot name="trigger">
|
||
|
|
<button type="button" class="tp-admin-control" aria-label="{{ __('ui.theme') }}" title="{{ __('ui.theme') }}">
|
||
|
|
<span class="tp-admin-theme-icon" aria-hidden="true" x-text="icons[theme] || icons.system">◐</span>
|
||
|
|
<span class="tp-admin-control-label" x-text="labels[theme] || labels.system">{{ __('ui.system') }}</span>
|
||
|
|
<x-filament::icon icon="heroicon-m-chevron-down" class="tp-admin-control-chevron" />
|
||
|
|
</button>
|
||
|
|
</x-slot>
|
||
|
|
|
||
|
|
<x-filament::dropdown.list>
|
||
|
|
@foreach(['light' => ['heroicon-o-sun', __('ui.light')], 'dark' => ['heroicon-o-moon', __('ui.dark')], 'system' => ['heroicon-o-computer-desktop', __('ui.system')]] as $value => [$icon, $label])
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="fi-dropdown-list-item"
|
||
|
|
x-on:click="choose('{{ $value }}')"
|
||
|
|
x-bind:aria-current="theme === '{{ $value }}' ? 'true' : null"
|
||
|
|
>
|
||
|
|
<x-filament::icon :icon="$icon" class="fi-icon fi-size-md" />
|
||
|
|
<span class="fi-dropdown-list-item-label">{{ $label }}</span>
|
||
|
|
<span class="ms-auto" x-show="theme === '{{ $value }}'" aria-hidden="true">✓</span>
|
||
|
|
</button>
|
||
|
|
@endforeach
|
||
|
|
</x-filament::dropdown.list>
|
||
|
|
</x-filament::dropdown>
|
||
|
|
</div>
|