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!