/
mirsud
/
casectrl
Обзор
Документация
Войти
/
mirsud
/
casectrl
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/theme-toggle.tsx
32 строки
983 B
94StarKing94
ав
28 июл 2026, 13:44
28 июл 2026, 13:44
fd21e96
Код
Авторство
О чём код?
"use client"; import { Moon, Sun } from "lucide-react"; import { useEffect, useState } from "react"; import { useTheme } from "@/components/theme-provider"; export function ThemeToggle() { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); const { resolvedTheme, setTheme } = useTheme(); const isDark = mounted && resolvedTheme === "dark"; return ( <button onClick={() => setTheme(isDark ? "light" : "dark")} className="relative flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground" aria-label="Toggle theme" > <Sun className={`h-4 w-4 transition-all ${ mounted && !isDark ? "scale-100 rotate-0" : "scale-0 rotate-90" }`} /> <Moon className={`absolute h-4 w-4 transition-all ${ mounted && isDark ? "scale-100 rotate-0" : "scale-0 rotate-90" }`} /> </button> ); }