mcwl-pc/app/components/DarkToggle.vue

22 lines
441 B
Vue

<script setup lang="ts">
const color = useColorMode()
useHead({
meta: [{
id: 'theme-color',
name: 'theme-color',
content: () => color.value === 'dark' ? '#222222' : '#ffffff',
}],
})
function toggleDark() {
color.preference = color.value === 'dark' ? 'light' : 'dark'
}
</script>
<template>
<button class="!outline-none" @click="toggleDark">
<div class="i-carbon-sun dark:i-carbon-moon" />
</button>
</template>