Files
thrilltrack-explorer/src-old/components/theme/ThemeToggle.tsx

23 lines
731 B
TypeScript

import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTheme } from "@/components/theme/ThemeProvider"
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
const toggleTheme = () => {
if (theme === "dark") {
setTheme("light")
} else {
setTheme("dark")
}
}
return (
<Button variant="outline" size="icon" onClick={toggleTheme}>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
)
}