36 lines
1.6 KiB
Vue
36 lines
1.6 KiB
Vue
<script setup>
|
|
const colorMode = useColorMode()
|
|
|
|
const isDark = computed({
|
|
get() {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="site-body-left-column-site-theme-toggle" :class="{'is-dark': isDark}" style="">
|
|
<span class="option mod-dark">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-moon">
|
|
<path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
</svg>
|
|
</span>
|
|
<div class="checkbox-container" :class="{'is-enabled': isDark}" @click="isDark = !isDark"></div>
|
|
<span class="option mod-light">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-sun">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2"></path>
|
|
<path d="M12 20v2"></path>
|
|
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
<path d="M2 12h2"></path>
|
|
<path d="M20 12h2"></path>
|
|
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</template> |