React Night Toggle

✨ Overview

React Night Toggle is a lightweight and customizable dark mode switch for React apps, built with TypeScript, framer-motion, and lucide-react.
Easily add a night/day theme toggle with smooth animations, customizable icons, and flexible color options.

---

🚀 Features

• 🌙 Clean & modern dark mode toggle
• ⚡ Built with TypeScript
• 🎨 Customizable icons (uses lucide-react by default)
• 🎨 Customizable colors via sunColor & moonColor props
• ✨ Smooth Framer Motion animations
• 📦 Lightweight and easy to use in any React project

---

📦 Installation

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

---

🔧 Usage

1️⃣ Basic 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>
  );
}

2️⃣ Custom Icons Example

You can pass your own icons instead of the default Sun/Moon:

import { useState } from 'react';
import { DarkModeSwitch } from 'react-night-toggle';
import { CloudSun, Star } from 'lucide-react';

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

  // onChange handler to toggle dark mode
  const toggleDarkMode = (checked: boolean) => setDark(checked);

  return (
    <div>
      <DarkModeSwitch
        checked={dark}
        onChange={toggleDarkMode}
        lightIcon={<CloudSun size={24} />}
        darkIcon={<Star size={24} />}
      />
      <h2>{dark ? 'Dark Mode Enabled 🌙' : 'Light Mode Enabled ☀️'}</h2>
    </div>
  );
}

3️⃣ Follow System Theme Example

You can automatically follow the user’s system color scheme by setting followSystem to true:

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

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

  return (
    <div>
      <DarkModeSwitch followSystem checked={dark} onChange={setDark} size={40} />
      <h2>{dark ? 'Dark Mode Enabled 🌙' : 'Light Mode Enabled ☀️'}</h2>
    </div>
  );
}

4️⃣ Colored Sun & Moon Example

You can customize the colors of the Sun and Moon icons:

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

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

  return (
    <div>
      <DarkModeSwitch
        checked={dark}
        onChange={setDark}
        size={56}
        sunColor="orange"
        moonColor="blueviolet"
      />
      <h2>{dark ? 'Dark Mode Enabled 🌙' : 'Light Mode Enabled ☀️'}</h2>
    </div>
  );
}

5️⃣ Large Toggle Example

You can increase the size of the toggle button by passing a numeric value or a string:

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

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

  return (
    <div>
      <DarkModeSwitch checked={dark} onChange={setDark} size={72} />
      <h2>{dark ? 'Dark Mode Enabled 🌙' : 'Light Mode Enabled ☀️'}</h2>
    </div>
  );
}

✨ This way you can use any React node (Lucide, Material UI, custom SVGs, etc.) for icons.

---

⚙️ Props

Prop	Type	Default	Description
checked	boolean	— (required)	Whether dark mode is active (true = dark, false = light).
onChange	(checked: boolean) => void	— (required)	Callback fired when the toggle is switched.
size	number | string	24	Size of the toggle button (applied to both icons).
lightIcon	React.ReactNode	<Sun />	Custom icon for light mode.
darkIcon	React.ReactNode	<Moon />	Custom icon for dark mode.
sunColor	string	currentColor	Color of the default Sun icon. Ignored if lightIcon is provided.
moonColor	string	currentColor	Color of the default Moon icon. Ignored if darkIcon is provided.
followSystem	boolean	false	Automatically follow the user’s system color scheme. Overrides checked when set to true.

---

🤝 Contributing

Contributions are welcome!
Feel free to open an issue or submit a pull request.

---

⭐ Show your support

Give a ⭐️ if this project helped you!