mirror of https://github.com/wg-easy/wg-easy
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
768 B
28 lines
768 B
<template>
|
|
<button
|
|
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 transition hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
|
|
:title="$t(`theme.${theme.preference}`)"
|
|
@click="toggleTheme"
|
|
>
|
|
<IconsSun v-if="theme.preference === 'light'" class="h-5 w-5" />
|
|
<IconsMoon
|
|
v-else-if="theme.preference === 'dark'"
|
|
class="h-5 w-5 text-neutral-400"
|
|
/>
|
|
<IconsHalfMoon v-else class="h-5 w-5 fill-gray-600 dark:fill-neutral-400" />
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const theme = useTheme();
|
|
|
|
function toggleTheme() {
|
|
const themeCycle = {
|
|
system: 'light',
|
|
light: 'dark',
|
|
dark: 'system',
|
|
} as const;
|
|
|
|
theme.preference = themeCycle[theme.preference];
|
|
}
|
|
</script>
|
|
|