<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
get () {
return colorMode.value === 'dark'
},
set (value) {
colorMode.value = value ? 'light' : 'dark'
}
})
</script>
<template>
<ClientOnly>
<UButton
:icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
color="gray"
variant="ghost"
aria-label="Theme"
@click="isDark = !isDark"
></UButton>
<template #fallback>
<div class="w-8 h-8" />
</template>
</ClientOnly>
</template>
<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
get () {
return colorMode.value === 'dark'
},
set (value) {
colorMode.value = value ? 'light' : 'dark'
}
})
</script>
<template>
<ClientOnly>
<UButton
:icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
color="gray"
variant="ghost"
aria-label="Theme"
@click="isDark = !isDark"
></UButton>
<template #fallback>
<div class="w-8 h-8" />
</template>
</ClientOnly>
</template>