Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 19x 15x 19x 19x 19x 3x 3x 16x 16x 19x 4x | import React, {useEffect, useState} from 'react';
import { Moon, Sun } from 'lucide-react';
/**
* DarkModeToggle component toggles between dark and light theme modes.
* It syncs the mode state with localStorage and adds/removes the 'dark' class on the root element.
*
* @component
* @module components/ui/DarkModeToggle
* @returns {JSX.Element} A button to toggle dark mode.
*/
export default function DarkModeToggle() {
const [darkMode, setDarkMode] = useState(() =>
localStorage.getItem('theme') === 'dark'
);
useEffect(() => {
const root = window.document.documentElement;
if (darkMode) {
root.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
root.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}, [darkMode]);
return (
<button
onClick={() => setDarkMode(!darkMode)}
className="flex items-center space-x-2 px-3 py-1.5 rounded-md
bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200
hover:bg-gray-300 dark:hover:bg-gray-600
transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-blue-500"
aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
>
{darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
</button>
);
}
|