39 lines
2.3 KiB
PHP
Executable File
39 lines
2.3 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') }}">
|
|
<button type="button" data-hd-appearance-value="light" onclick="if(window.hdSetAppearance){window.hdSetAppearance('light')}" class="hd-appearance-choice">
|
|
<i class="fa-regular fa-sun" aria-hidden="true"></i><span>{{ __('Light') }}</span>
|
|
</button>
|
|
<button type="button" data-hd-appearance-value="dark" onclick="if(window.hdSetAppearance){window.hdSetAppearance('dark')}" class="hd-appearance-choice">
|
|
<i class="fa-regular fa-moon" aria-hidden="true"></i><span>{{ __('Dark') }}</span>
|
|
</button>
|
|
<button type="button" data-hd-appearance-value="system" onclick="if(window.hdSetAppearance){window.hdSetAppearance('system')}" class="hd-appearance-choice">
|
|
<i class="fa-solid fa-desktop" aria-hidden="true"></i><span>{{ __('System') }}</span>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
function sync() {
|
|
var value = document.documentElement.getAttribute('data-hd-appearance') || 'system';
|
|
var buttons = document.querySelectorAll('[data-hd-appearance-value]');
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
if (buttons[i].getAttribute('data-hd-appearance-value') === value) buttons[i].classList.add('is-active');
|
|
else buttons[i].classList.remove('is-active');
|
|
}
|
|
}
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', sync, false); else sync();
|
|
document.addEventListener('click', function (event) {
|
|
var target = event.target;
|
|
while (target && target !== document && !target.getAttribute('data-hd-appearance-value')) target = target.parentNode;
|
|
if (target && target.getAttribute) setTimeout(sync, 0);
|
|
}, false);
|
|
document.addEventListener('livewire:navigated', sync, false);
|
|
}());
|
|
</script>
|
|
</x-settings.layout>
|
|
</section>
|