76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import { useThemeStore } from '@/stores/theme'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
/** floating = auth pages; inline = header / toolbar */
|
|
variant?: 'floating' | 'inline'
|
|
}>(),
|
|
{ variant: 'floating' },
|
|
)
|
|
|
|
const themeStore = useThemeStore()
|
|
const { isDark } = storeToRefs(themeStore)
|
|
|
|
const themeIcon = computed(() =>
|
|
isDark.value ? 'vuesax-linear:sun-1' : 'vuesax-linear:moon',
|
|
)
|
|
const themeLabel = computed(() =>
|
|
isDark.value ? 'تغییر به تم روشن' : 'تغییر به تم تاریک',
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="auth-theme-toggle"
|
|
:class="variant === 'inline' ? 'auth-theme-toggle--inline' : 'auth-theme-toggle--floating'"
|
|
:aria-label="themeLabel"
|
|
:title="themeLabel"
|
|
@click="themeStore.toggleLightDark()"
|
|
>
|
|
<BasicIcon :icon="themeIcon" :size="18" :stroke-width="1.5" />
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.auth-theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.auth-theme-toggle--floating {
|
|
position: fixed;
|
|
top: calc(12px + env(safe-area-inset-top, 0px));
|
|
inset-inline-end: 16px;
|
|
z-index: 100;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.auth-theme-toggle--inline {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.auth-theme-toggle:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
</style>
|