34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
|
|
export default function ThemeSwitch() {
|
|
const [togglETHeme, setTogglETHeme] = useState<string>(
|
|
() => (localStorage.getItem("togglETHeme") as string) || "light-theme"
|
|
)
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem("togglETHeme", JSON.stringify(togglETHeme))
|
|
document.body.classList.add(togglETHeme)
|
|
return () => {
|
|
document.body.classList.remove(togglETHeme)
|
|
}
|
|
}, [togglETHeme])
|
|
|
|
const toggleTheme = () => {
|
|
setTogglETHeme(prevTheme => (prevTheme === "light-theme" ? "dark-theme" : "light-theme"))
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<nav className="switcher__tab" onClick={toggleTheme}>
|
|
<span className={`switcher__btn ${togglETHeme === "light-theme" ? "light-mode" : "dark-mode"}`}>
|
|
{togglETHeme === "light-theme" ? <i className="flaticon-sun" /> : <i className="flaticon-moon" />}
|
|
</span>
|
|
<span className="switcher__mode" />
|
|
<span className={`switcher__btn ${togglETHeme === "light-theme" ? "dark-mode" : "light-mode"}`}>
|
|
{togglETHeme === "light-theme" ? <i className="flaticon-moon" /> : <i className="flaticon-sun" />}
|
|
</span>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|