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

September 9, 2025

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