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

Praveen Singh — Tue, 09 Sep 2025 12:07:06 +0000

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!