2025-11-06 09:24:44 +01:00
|
|
|
<template>
|
2025-11-11 19:12:21 +01:00
|
|
|
<UDropdownMenu :key="colorMode.preference" :items="themes" :content="{ align: 'start' }">
|
|
|
|
|
<UButton color="neutral" variant="outline" :icon="icons[currentColor]" :aria-label="$t('menu.theme')" />
|
2025-11-06 09:24:44 +01:00
|
|
|
</UDropdownMenu>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
type Theme = 'light' | 'dark' | 'system';
|
|
|
|
|
const icons: Dictionary<Theme, string> = {
|
|
|
|
|
light: 'material-symbols:light-mode',
|
|
|
|
|
dark: 'material-symbols:dark-mode',
|
|
|
|
|
system: 'material-symbols:computer-outline',
|
|
|
|
|
};
|
|
|
|
|
const colorMode = useColorMode();
|
|
|
|
|
const currentColor = computed<Theme>(() => colorMode.preference ?? 'system');
|
|
|
|
|
const themes = computed<DropdownValue[]>(() =>
|
|
|
|
|
['light', 'dark', 'system'].map((theme) => ({
|
|
|
|
|
code: theme,
|
|
|
|
|
label: $t(`theme.${theme}`),
|
|
|
|
|
icon: icons[theme],
|
|
|
|
|
type: 'checkbox' as const,
|
|
|
|
|
checked: currentColor.value === theme,
|
|
|
|
|
onUpdateChecked: () => switchColor(theme),
|
|
|
|
|
})),
|
|
|
|
|
);
|
|
|
|
|
const switchColor = (theme: Theme) => (colorMode.preference = theme);
|
|
|
|
|
</script>
|
