49 lines
1.7 KiB
Vue
49 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownItem } from '~/types/dropdown';
|
|
|
|
const props = defineProps<{
|
|
size: 'small' | 'medium' | 'large';
|
|
}>();
|
|
|
|
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="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)]"
|
|
:class="{
|
|
'h-7 w-7 text-5': size === 'small',
|
|
'h-9 w-9 text-6': size === 'medium',
|
|
'h-11 w-11 text-7': size === 'large',
|
|
}">
|
|
<span :class="['pointer-events-none', currentOption!.icon]"></span>
|
|
</button>
|
|
</template> |