55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
// import "./DarkMode.css"
|
||
import { ChangeEventHandler } from "react"
|
||
|
||
/* NEW (START) */
|
||
const setDark = () => {
|
||
localStorage.setItem("theme", "dark")
|
||
document.documentElement.setAttribute("data-theme", "dark")
|
||
}
|
||
|
||
const setLight = () => {
|
||
localStorage.setItem("theme", "light")
|
||
document.documentElement.setAttribute("data-theme", "light")
|
||
}
|
||
|
||
const storedTheme = localStorage.getItem("theme")
|
||
|
||
const prefersDark =
|
||
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||
|
||
const defaultDark =
|
||
storedTheme === "dark" || (storedTheme === null && prefersDark)
|
||
|
||
if (defaultDark) {
|
||
setDark()
|
||
}
|
||
|
||
const toggleTheme: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||
if (e.target.checked) {
|
||
setDark()
|
||
} else {
|
||
setLight()
|
||
}
|
||
}
|
||
/* NEW (END) */
|
||
|
||
const DarkMode = () => {
|
||
return (
|
||
<div className="toggle-theme-wrapper">
|
||
<span>☀️</span>
|
||
<label className="toggle-theme" htmlFor="checkbox">
|
||
<input
|
||
type="checkbox"
|
||
id="checkbox"
|
||
// NEW
|
||
onChange={toggleTheme}
|
||
defaultChecked={defaultDark}
|
||
/>
|
||
<div className="slider round"></div>
|
||
</label>
|
||
<span>🌒</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DarkMode
|