/
45case
/
ptable
Обзор
Документация
Войти
/
45case
/
ptable
Код
Запросы
3
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
dev
src/shared/ui/ThemeSwitchButton.vue
23 строки
1 KB
Olya
first_commit
06 июл 2026, 18:16
06 июл 2026, 18:16
0ff6e29
Код
Авторство
О чём код?
<script setup lang="ts"> import { computed } from "vue"; import MoonIcon from "./icons/MoonIcon.vue"; import SunIcon from "./icons/SunIcon.vue"; import { APP_THEMES, useTheme } from "../lib/useTheme"; const { theme, toggleTheme } = useTheme(); const nextThemeLabel = computed(() => (theme.value === APP_THEMES.DARK ? "светлую" : "темную")); </script> <template> <button type="button" class="inline-flex h-11 w-11 items-center justify-center rounded-full border border-(--color-border) bg-(--color-surface) text-(--color-accent) shadow-[0_10px_30px_var(--color-shadow)] transition-[transform,border-color,background-color,color] duration-200 hover:-translate-y-px hover:border-(--color-border-strong) hover:bg-(--color-hover-surface) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)" :aria-label="`Переключить на ${nextThemeLabel} тему`" @click="toggleTheme" > <SunIcon v-if="theme === APP_THEMES.DARK" aria-hidden="true" class="size-4.5" /> <MoonIcon v-else aria-hidden="true" class="size-4.5" /> </button> </template>