Wanna give your React app that sleek, moody dark mode vibe? ๐ Letโs make it happen with some quick moves and a sprinkle of Tailwind magic. Buckle up, itโs toggle time! ๐
First things first, letโs grab a nifty little package to handle the light-to-dark sorcery. Pop this command into your terminal and let Bun do the heavy lifting! ๐ฅ
bun add use-react-dark-mode
Time to tell Tailwind weโre ready to go dark. Crack open your tailwind.config.js and add this one-liner to make dark mode toggle like a champ. ๐ช
darkMode: "class",
Now, letโs weave some dark mode wizardry into your app. Import the useDarkMode
hook and set up a toggle button that screams โcool coder alert!โ ๐ Hereโs the code to make it pop:
import useDarkMode from "use-react-dark-mode";
function App() {
const { isDark, toggle } = useDarkMode();
return (
<>
<p className={isDark ? "text-white" : "text-black"}>
Hello, Iโm a chameleon! Try toggling to see me in {isDark ? "light" : "dark"} mode! ๐ฆ
</p>
<button
onClick={toggle}
className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
>
{isDark ? "โ๏ธ Light Mode" : "๐ Dark Mode"}
</button>
</>
);
}
Thatโs it โ youโve just leveled up your React app with a slick dark mode toggle! ๐ Flip that switch, admire the vibes, and maybe add some extra flair to make it yours. Now go build something that shines (or glows in the dark)! ๐พ
Made with โค๏ธ in Aotearoa.