78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import {
|
||
|
|
IcRoundMotionPhotosAuto,
|
||
|
|
IcRoundWbSunny,
|
||
|
|
MdiMoonAndStars,
|
||
|
|
} from '@vben-core/iconify';
|
||
|
|
import {
|
||
|
|
ToggleGroup,
|
||
|
|
ToggleGroupItem,
|
||
|
|
VbenTooltip,
|
||
|
|
} from '@vben-core/shadcn-ui';
|
||
|
|
|
||
|
|
import { $t } from '@vben/locales';
|
||
|
|
import { preference, updatePreference, usePreference } from '@vben/preference';
|
||
|
|
|
||
|
|
import ThemeButton from './theme-button.vue';
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'ThemeToggle',
|
||
|
|
});
|
||
|
|
|
||
|
|
withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
|
||
|
|
shouldOnHover: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
function handleChange(isDark: boolean) {
|
||
|
|
updatePreference({ theme: isDark ? 'dark' : 'light' });
|
||
|
|
}
|
||
|
|
|
||
|
|
const { isDark } = usePreference();
|
||
|
|
|
||
|
|
const PRESETS = [
|
||
|
|
{
|
||
|
|
icon: IcRoundWbSunny,
|
||
|
|
name: 'light',
|
||
|
|
title: $t('preference.light'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: MdiMoonAndStars,
|
||
|
|
name: 'dark',
|
||
|
|
title: $t('preference.dark'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: IcRoundMotionPhotosAuto,
|
||
|
|
name: 'auto',
|
||
|
|
title: $t('preference.follow-system'),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<VbenTooltip side="bottom" :disabled="!shouldOnHover">
|
||
|
|
<template #trigger>
|
||
|
|
<ThemeButton
|
||
|
|
:model-value="isDark"
|
||
|
|
type="icon"
|
||
|
|
@update:model-value="handleChange"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
<ToggleGroup
|
||
|
|
:model-value="preference.theme"
|
||
|
|
type="single"
|
||
|
|
variant="outline"
|
||
|
|
class="gap-2"
|
||
|
|
@update:model-value="(value) => updatePreference('theme', value)"
|
||
|
|
>
|
||
|
|
<ToggleGroupItem
|
||
|
|
v-for="item in PRESETS"
|
||
|
|
:key="item.name"
|
||
|
|
:value="item.name"
|
||
|
|
>
|
||
|
|
<component :is="item.icon" class="size-5" />
|
||
|
|
</ToggleGroupItem>
|
||
|
|
</ToggleGroup>
|
||
|
|
</VbenTooltip>
|
||
|
|
</div>
|
||
|
|
</template>
|