Add Dark Mode Toggle Using TailwindCSS
Use this AI prompt to add a dark mode toggle to your TailwindCSS project, supporting persisted user preferences with localStorage.
🧠 What This Prompt Does
This AI prompt helps you implement a dark mode toggle for TailwindCSS-based projects.
It automatically saves the user’s theme preference and switches between light and dark themes dynamically.
💬 The Prompt
You are a frontend engineer.
Generate a dark mode toggle component for a TailwindCSS project.
Requirements:
- Toggle light/dark mode via button
- Persist preference in localStorage
- Apply dark class to <html> element
- Provide React component code
🚀 Example Output (AI Generated)
import { useEffect, useState } from 'react';
export default function DarkModeToggle() {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
document.documentElement.classList.add('dark');
setDarkMode(true);
}
}, []);
const toggleTheme = () => {
const html = document.documentElement;
if (darkMode) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
setDarkMode(!darkMode);
};
return (
<button
onClick={toggleTheme}
className='p-2 rounded-md border border-gray-400 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'>
{darkMode ? '🌙 Dark Mode' : '☀️ Light Mode'}
</button>
);
}
📘 When to Use This Prompt
- When enabling theme toggles in dashboards or blogs.
- To add personalization features with minimal JS.
- When building modern UIs with accessibility in mind.
💡 Best Practices
- Enable darkMode as
"class"in your Tailwind config. - Add smooth transitions between modes using
transition-colors. - Provide sufficient contrast in both themes.
- Respect system preference using the
prefers-color-schememedia query.
🏁 Summary
This prompt helps you integrate a fully functional dark mode toggle in your TailwindCSS projects — with persistent user settings and clean UI transitions.
How do I enable dark mode in Tailwind?
Set darkMode to "class" in your tailwind.config.js and toggle the class on the root element.
Can I persist the user’s dark mode setting?
Yes. Use localStorage to save the user’s preference and apply it on page load.
Does Tailwind automatically style dark mode?
No, but it provides dark: variant utilities that apply styles when the dark class is active.
Advertisement