tududi/app/frontend/components/Shared/DarkModeToggle.tsx
2024-10-27 11:14:20 +02:00

20 lines
557 B
TypeScript

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)}>
<i className={`bi ${darkMode ? 'bi-sun' : 'bi-moon'}`}></i>
</button>
);
};
export default DarkModeToggle;