30 lines
622 B
Vue
30 lines
622 B
Vue
<template>
|
|
<ClientOnly v-if="!colorMode?.forced">
|
|
<div class="flex h-8 w-8 cursor-pointer items-center justify-center">
|
|
<i
|
|
:class="[
|
|
'uil text-[32px] cursor-pointer',
|
|
isDark ? 'uil-moon' : 'uil-sun',
|
|
]"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
</div>
|
|
<template #fallback>
|
|
<div class="size-20" />
|
|
</template>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup>
|
|
const colorMode = useColorMode()
|
|
|
|
const isDark = computed({
|
|
get() {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set(_isDark) {
|
|
colorMode.preference = _isDark ? 'dark' : 'light'
|
|
},
|
|
})
|
|
</script>
|