40 lines
996 B
TypeScript
40 lines
996 B
TypeScript
import { Moon, Sun } from "lucide-react"
|
|
|
|
export function ThemeToggle() {
|
|
const updateTheme = () => {
|
|
const isDark = document.documentElement.classList.contains("dark")
|
|
localStorage.setItem("theme", isDark ? "dark" : "light")
|
|
document.documentElement.setAttribute(
|
|
"data-theme",
|
|
isDark ? "material-theme-darker" : "material-theme-lighter",
|
|
)
|
|
}
|
|
|
|
const handleToggleClick = () => {
|
|
const element = document.documentElement
|
|
|
|
// if not supported, just toggle the theme
|
|
if (!document.startViewTransition) {
|
|
element.classList.toggle("dark")
|
|
updateTheme()
|
|
return
|
|
}
|
|
|
|
document.startViewTransition(() => {
|
|
element.classList.toggle("dark")
|
|
updateTheme()
|
|
})
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleToggleClick}
|
|
aria-label="Toggle theme"
|
|
title="Toggle theme"
|
|
className="cursor-pointer"
|
|
>
|
|
<Sun className="dark:hidden" />
|
|
<Moon className="hidden dark:block" />
|
|
</button>
|
|
)
|
|
}
|