23 lines
679 B
Vue
23 lines
679 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useColorMode } from '@vueuse/core'
|
|
import { MoonIcon, SunIcon } from 'lucide-vue-next';
|
|
import { Switch } from './ui/switch';
|
|
|
|
const mode = useColorMode({ disableTransition: false })
|
|
|
|
const isDark = computed({
|
|
get: () => mode.value === 'dark',
|
|
set: (value: boolean) => {
|
|
mode.value = value ? 'dark' : 'light';
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center space-x-2">
|
|
<label for="theme-switch"><SunIcon :size="18" /></label>
|
|
<Switch id="theme-switch" v-model="isDark" />
|
|
<label for="theme-switch"><MoonIcon :size="18" /></label>
|
|
</div>
|
|
</template>
|