29 lines
1.5 KiB
TypeScript
29 lines
1.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
export default function ThemeController() {
|
|
const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light");
|
|
const handleToggle = (e: any) => {
|
|
if (e.target.checked) {
|
|
setTheme("cupcake");
|
|
} else {
|
|
setTheme("night");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('theme', theme!)
|
|
const localTheme = localStorage.getItem('theme')
|
|
document.querySelector('html')?.setAttribute('data-theme', localTheme!)
|
|
}, [theme]);
|
|
|
|
|
|
return (
|
|
<label className="toggle text-base-content">
|
|
<input type="checkbox" onChange={handleToggle} className="theme-controller" />
|
|
|
|
<svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></g></svg>
|
|
<svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></g></svg>
|
|
|
|
</label>
|
|
)
|
|
} |