68 lines
2.8 KiB
PHP
68 lines
2.8 KiB
PHP
@props([
|
|
'lightIcon' => 'sun',
|
|
'lightText' => 'Light',
|
|
'darkIcon' => 'moon',
|
|
'darkText' => 'Dark',
|
|
'systemIcon' => 'computer-desktop',
|
|
'systemText' => 'System',
|
|
'iconRight' => true,
|
|
'iconType' => 'outline',
|
|
'iconDir' => '',
|
|
'modular' => false,
|
|
])
|
|
@php
|
|
$iconRight = parseBladewindVariable($iconRight);
|
|
$modular = parseBladewindVariable($modular);
|
|
@endphp
|
|
@once
|
|
<x-bladewind::dropmenu :modular="$modular" icon_right="{{$iconRight}}">
|
|
<x-slot:trigger>
|
|
<x-bladewind::icon
|
|
name="{{$lightIcon}}"
|
|
type="{{$iconType}}"
|
|
dir="{{$iconDir}}"
|
|
class="text-primary-600 hover:text-primary-500 dark:!text-dark-500 dark:hover:text-dark-300 stroke-2 theme-light hidden"/>
|
|
<x-bladewind::icon
|
|
name="{{$darkIcon}}"
|
|
type="{{$iconType}}"
|
|
dir="{{$iconDir}}"
|
|
class="text-primary-400 hover:text-primary-500 dark:!text-dark-500 dark:hover:!text-dark-400 stroke-2 theme-dark hidden"/>
|
|
<x-bladewind::icon
|
|
name="{{$systemIcon}}"
|
|
type="{{$iconType}}"
|
|
dir="{{$iconDir}}"
|
|
class="text-primary-400 hover:text-primary-500 dark:!text-dark-500 dark:hover:!text-dark-400 stroke-2 theme-system hidden"/>
|
|
</x-slot:trigger>
|
|
<x-bladewind::dropmenu-item onclick="chooseTheme('light')" icon="{{$lightIcon}}" icon_css="stroke-2">
|
|
{{$lightText}}
|
|
</x-bladewind::dropmenu-item>
|
|
<x-bladewind::dropmenu-item onclick="chooseTheme('dark')" icon="{{$darkIcon}}" icon_css="stroke-2">
|
|
{{$darkText}}
|
|
</x-bladewind::dropmenu-item>
|
|
<x-bladewind::dropmenu-item onclick="chooseTheme('system')" icon="{{$systemIcon}}" icon_css="stroke-2">
|
|
{{$systemText}}
|
|
</x-bladewind::dropmenu-item>
|
|
</x-bladewind::dropmenu>
|
|
<script>
|
|
const chooseTheme = (theme) => {
|
|
theme = (theme !== 'null' && theme !== undefined && theme !== null) ? theme : 'system';
|
|
addToStorage('theme', theme);
|
|
if (theme === 'dark' || theme === 'system') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
hide('.theme-dark');
|
|
hide('.theme-light');
|
|
hide('.theme-system');
|
|
unhide(`.theme-${theme}`);
|
|
}
|
|
chooseTheme(getFromStorage('theme'));
|
|
|
|
// Listen for changes in the system theme
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
|
|
chooseTheme(event.matches ? 'dark' : 'light');
|
|
});
|
|
</script>
|
|
@endonce |