29 lines
564 B
Vue
29 lines
564 B
Vue
|
<script lang="ts" setup>
|
||
|
|
const colorMode = useColorMode()
|
||
|
|
|
||
|
|
const isDark = computed({
|
||
|
|
get() {
|
||
|
|
return colorMode.value === 'dark'
|
||
|
|
},
|
||
|
|
set() {
|
||
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ClientOnly>
|
||
|
|
<UButton
|
||
|
|
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||
|
|
color="gray"
|
||
|
|
variant="ghost"
|
||
|
|
aria-label="Theme"
|
||
|
|
@click="isDark = !isDark"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<template #fallback>
|
||
|
|
<div class="h-8 w-8" />
|
||
|
|
</template>
|
||
|
|
</ClientOnly>
|
||
|
|
</template>
|