36 lines
1.4 KiB
Vue
36 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownItem } from '~/types/dropdown';
|
|
|
|
type Theme = 'light' | 'dark' | 'system';
|
|
|
|
const colorMode = useColorMode();
|
|
|
|
const themeOptions: DropdownItem[] = [
|
|
{ value: 'light', label: 'Light', icon: 'mynaui:sun' },
|
|
{ value: 'dark', label: 'Dark', icon: 'mynaui:moon' },
|
|
{ value: 'system', label: 'System', icon: 'mynaui:desktop' },
|
|
];
|
|
|
|
const currentOption = computed(
|
|
() => themeOptions.find((option) => option.value === colorMode.preference) || themeOptions[2],
|
|
);
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const selectTheme = (item: DropdownItem) => {
|
|
colorMode.preference = item.value as Theme;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Dropdown class="relative" v-model="isOpen" @select="selectTheme" :items="themeOptions" verticality="asscending"
|
|
placement="right" width="140px">
|
|
<template #trigger="{ toggle, isOpen }">
|
|
<button aria-label="Open theme switcher" @click="toggle" :class="[isOpen ? 'bg-[var(--color-highlight)] hover:text-[var(--color-subtle)] focus-visible:text-[var(--color-subtle)]' : 'bg-transparent text-[var(--color-muted)]',
|
|
'h-7 w-7 flex items-center justify-center rounded-lg hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors active:text-[var(--color-text)]'
|
|
]">
|
|
<Icon :name="currentOption!.icon!" class="text-4" />
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</template> |