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