Пять анимированных SVG-кнопок для переключения светлой и тёмной темы: половинка круга, солнце с лучами, солнце из точек, лампочка и затмение. При нажатии каждая плавно перерисовывается: лучи прячутся, полумесяц наплывает на диск, нить лампочки гаснет, а фон кнопки меняется с белого на чёрный.
Масштаб, отступ и расположение кнопок в строку или столбец меняются в панели «Настройка».
Скопируйте эти файлы в components/theme-toggles/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ThemeToggleButton2 } from "@/components/theme-toggles/theme-toggles";
export default function Page() {
return <ThemeToggleButton2 className="size-12 p-2" onToggle={(dark) => document.documentElement.classList.toggle("dark", dark)} />;
}className?Классы кнопки, например размер и внутренний отступ
Тип string·По умолчанию ""
defaultDark?Начальное состояние: тёмная тема
Тип boolean·По умолчанию false
onToggle?Вызывается при каждом переключении с новым состоянием
Тип (dark: boolean) => void
style?Инлайн-стили кнопки, например точный размер
Тип CSSProperties