Add Dark Mode to React.js App

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! ๐Ÿš€

๐Ÿ› ๏ธ Snag the Dark Mode Package ๐Ÿ“ฆ

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! ๐Ÿฅ

powershell
bun add use-react-dark-mode

๐ŸŽจ Tweak Your Tailwind Config ๐Ÿ–Œ๏ธ

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. ๐Ÿ’ช

javascript
darkMode: "class",

๐Ÿ’ป Drop in the Code Magic โœจ

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:

jsx
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>
    </>
  );
}

๐ŸŽ‰ Boom! Youโ€™re a Dark Mode Dynamo! ๐ŸŒŸ

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.