Introducing react-night-toggle - A Simple Dark/Light Mode Switch for React

We all love dark mode, but implementing a clean and customizable toggle
can be a bit annoying.\
That's why I built
react-night-toggle
-- a lightweight, flexible React component that makes switching between
dark and light mode super easy.

---

✨ Why react-night-toggle?

Most projects need a dark/light mode toggle, but:\

• Existing solutions are often too heavy or opinionated.\
• Customization (icons, colors) is limited.\
• No built-in support for system theme preference.

react-night-toggle solves this by giving you:\

• 🎨 Custom Icons & Colors -- use your own sun/moon icons and define their colors.\
• ⚡ Lightweight & Easy -- minimal setup, no external dependencies.\
• 🖥️ System Theme Support -- automatically follow system dark/light preference.

---

🚀 Installation

npm install react-night-toggle
# or
yarn add react-night-toggle

---

💻 Usage Example

import { useState } from "react";
import { DarkModeSwitch } from "react-night-toggle";

export default function App() {
  const [dark, setDark] = useState(false);

  const toggleDarkMode = (checked: boolean) => setDark(checked);

  return (
    <div className={dark ? "dark" : ""}>
      <DarkModeSwitch
        checked={dark}
        onChange={toggleDarkMode}
        sunColor="orange" // optional, defaults to currentColor
        moonColor="black" // optional, defaults to currentColor
      />
      <h1>{dark ? "🌙 Dark Mode" : "☀️ Light Mode"}</h1>
    </div>
  );
}

---

🔗 Links

• 📦 npm: react-night-toggle\
• 💻 GitHub: github.com/Praveenskg/react-night-toggle\
• 🌍 Live Demo: react-night-toggle.vercel.app

---

🙌 Feedback Welcome

This is just the beginning! I'd love to know:\

• What features would you like to see next?\
• Does it work smoothly in your projects?

If you find it useful, consider giving it a ⭐ on GitHub.\
It helps a lot and keeps me motivated to improve it.

👉 Try it today and make dark mode switching effortless in your React
apps!