1/n Fixing dark mode
This commit is contained in:
parent
f42e57d464
commit
8d886e0961
6 changed files with 31 additions and 35 deletions
|
|
@ -1,27 +0,0 @@
|
|||
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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue