All files / src/components/ui/darkModeToggle DarkModeToggle.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
8x
4x
 
 
8x
8x
8x
3x
3x
 
5x
5x
 
 
 
8x
 
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/DarkModeToggle
 * @returns {JSX.Element} A button to toggle dark mode.
 */
export 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>
    );
 
}