46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<label class="toggle text-base-content">
|
|
<input type="checkbox" value="synthwave" class="theme-controller" @click="theme.toggleTheme"
|
|
:checked="checkState">
|
|
|
|
<svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
|
|
<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>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useThemeStore } from '@/stores/theme';
|
|
import { computed } from 'vue';
|
|
|
|
const theme = useThemeStore();
|
|
|
|
const checkState = computed(() => {
|
|
return theme.isDarkTheme()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
@import "../assets/main.css"
|
|
</style>
|