25 lines
676 B
TypeScript
25 lines
676 B
TypeScript
import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
const DarkModeToggle: React.FC = () => {
|
|
const [darkMode, setDarkMode] = useState<boolean>(() => {
|
|
return localStorage.getItem("darkMode") === "true";
|
|
});
|
|
|
|
useEffect(() => {
|
|
document.body.classList.toggle("dark-mode", darkMode);
|
|
localStorage.setItem("darkMode", darkMode.toString());
|
|
}, [darkMode]);
|
|
|
|
return (
|
|
<button onClick={() => setDarkMode(!darkMode)}>
|
|
{darkMode ? (
|
|
<SunIcon className="h-6 w-6" />
|
|
) : (
|
|
<MoonIcon className="h-6 w-6" />
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default DarkModeToggle;
|