32 lines
904 B
Vue
32 lines
904 B
Vue
|
<template>
|
||
|
|
<span class="flex min-w-8 cursor-pointer" @click="chanegMode">
|
||
|
|
<ClientOnly>
|
||
|
|
<span :title="formatedModeName">
|
||
|
|
<DarkComponent v-if="colormode.value == 'dark'" class="w-8" />
|
||
|
|
<LightComponent v-if="colormode.value == 'light'" class="w-8" />
|
||
|
|
</span>
|
||
|
|
</ClientOnly>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import LightComponent from './MlLight.vue';
|
||
|
|
import DarkComponent from './MlDark.vue';
|
||
|
|
const colormode = useColorMode();
|
||
|
|
function chanegMode(): void {
|
||
|
|
if (colormode.preference == 'dark') {
|
||
|
|
colormode.preference = 'light';
|
||
|
|
} else {
|
||
|
|
colormode.preference = 'dark';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const formatedModeName = computed(() => {
|
||
|
|
if (colormode.value.length > 0) {
|
||
|
|
return colormode.value.charAt(0).toUpperCase() + colormode.value.slice(1);
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|