Кнопка смены темы, которая не просто перекрашивает страницу: через View Transition API новая тема проявляется поверх старой расширяющимся кругом, шторкой с любой стороны, диагональным полигоном, размытым пятном или сквозь увеличивающуюся маску-фигуру.
Вариант перехода, точку старта и размытие краёв можно выбрать пропсами, а на этой странице — в панели «Настройка». Иконка на кнопке поворачивается на пол-оборота при каждом переключении. В браузерах без View Transition API тема меняется мгновенно.
Скопируйте эти файлы в components/view-transition-theme-toggle/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ThemeToggleButton } from "@/components/view-transition-theme-toggle/view-transition-theme-toggle";
export function Header() {
return <ThemeToggleButton variant="circle" start="top-right" blur label="Сменить тему" />;
}variant?Форма перехода
Тип "circle" | "rectangle" | "gif" | "polygon" | "circle-blur"·По умолчанию "circle"
start?Откуда начинается переход: центр, углы или стороны
Тип AnimationStart·По умолчанию "center"
blur?Размытие краёв во время перехода
Тип boolean·По умолчанию false
gifUrl?Адрес маски для варианта gif
Тип string·По умолчанию ""
size?Размер кнопки в пикселях
Тип number·По умолчанию 40
label?Подпись для экранного чтения
Тип string·По умолчанию "Toggle theme"
className?Классы кнопки
Тип string·По умолчанию ""