40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownItem } from '~/types/dropdown';
|
|
|
|
type Theme = 'light' | 'dark' | 'system';
|
|
|
|
const { updateSettings, settings } = await useUserSettings();
|
|
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
|
|
|
const selectTheme = (colorScheme: Theme) => {
|
|
updateSettings({ appearance: { colorScheme } });
|
|
};
|
|
|
|
const themeOptions: DropdownItem[] = [
|
|
{ id: 'light', label: 'Light', icon: 'i-mynaui-sun', onClick: () => selectTheme('light') },
|
|
{ id: 'dark', label: 'Dark', icon: 'i-mynaui-moon', onClick: () => selectTheme('dark') },
|
|
{ id: 'system', label: 'System', icon: 'i-mynaui-desktop', onClick: () => selectTheme('system') },
|
|
];
|
|
|
|
const currentOption = computed(
|
|
() => themeOptions.find((option) => option.id === settings.value.appearance.colorScheme) || themeOptions[2],
|
|
);
|
|
|
|
const toggleDropdown = (e: MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
if (dropdownState.open) {
|
|
closeDropdown();
|
|
return;
|
|
}
|
|
|
|
openDropdown(e, () => themeOptions, { verticality: 'ascending', placement: 'right' });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button aria-label="Open theme switcher" @click="toggleDropdown"
|
|
class="h-7 w-7 flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]">
|
|
<span :class="['text-5 pointer-events-none', currentOption!.icon]"></span>
|
|
</button>
|
|
</template> |