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>
|