20 lines
627 B
Vue
20 lines
627 B
Vue
|
<template>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-surface-2 text-muted transition hover:text-text"
|
|||
|
|
:aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
|
|||
|
|
@click="toggle"
|
|||
|
|
>
|
|||
|
|
<span v-if="isDark" aria-hidden="true">☀️</span>
|
|||
|
|
<span v-else aria-hidden="true">🌙</span>
|
|||
|
|
</button>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
import { useTheme } from '@/composables/useTheme';
|
|||
|
|
|
|||
|
|
const { isDark: mode, toggle } = useTheme();
|
|||
|
|
const isDark = computed(() => mode.value === 'dark');
|
|||
|
|
</script>
|