Dark Theme Template

Site Preview

Description

This template uses a class directive to toggle dark mode theme with Tailwind CSS. like this...
className="bg-white dark:bg-black"
https://tailwindcss.com/docs/dark-mode

🔥 Features

• Dark toggle class html with Tailwind
• Local Storage with just one useEffect

Example

page.jsx

const [darkMode, setDarkMode] = useState(); //boolean value

useEffect(() => {
    const storedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
    if (storedDarkMode) {
        document.querySelector('html').classList.add('dark');
        setDarkMode(storedDarkMode);
    }
}, []);

    const toggleDarkMode = () => {
        document.querySelector('html').classList.toggle('dark', !darkMode);
        localStorage.setItem('darkMode', JSON.stringify(!darkMode));
        setDarkMode(!darkMode);
    };

    onClick={toggleDarkMode}>
    //...
    {darkMode ? "🌚" : "🌞"}