27 lines
755 B
TypeScript
27 lines
755 B
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
const DarkModeToggle = () => {
|
|
const getInitialState = () => {
|
|
const storedDarkMode = localStorage.getItem("darkMode");
|
|
return storedDarkMode ? JSON.parse(storedDarkMode) : false;
|
|
};
|
|
const [isDarkMode, setIsDarkMode] = useState<boolean>(getInitialState);
|
|
|
|
useEffect(() => {
|
|
document.body.classList.toggle("dark", isDarkMode);
|
|
localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
|
|
}, [isDarkMode]);
|
|
|
|
return (
|
|
<div className="fixed bottom-5 right-5">
|
|
<button
|
|
onClick={() => setIsDarkMode((prev) => !prev)}
|
|
className="ml-2 text-gray-700 dark:text-gray-300"
|
|
>
|
|
Dark Mode
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DarkModeToggle;
|