This content originally appeared on DEV Community and was authored by Praveen Singh
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!
This content originally appeared on DEV Community and was authored by Praveen Singh
Praveen Singh | Sciencx (2025-09-09T12:07:06+00:00) Introducing react-night-toggle – A Simple Dark/Light Mode Switch for React. Retrieved from https://www.scien.cx/2025/09/09/introducing-react-night-toggle-a-simple-dark-light-mode-switch-for-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.