Home

Awesome

react-dark-mode-toggle

Hello! 👋 This package is now deprecated. Please migrate over to react-dark-mode-toggle-2.

A super cutesy dark mode toggle button for React. Inspired by overreacted.io.

<a href="#badge"> <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"></a> <p align="center"> <img src="./assets/title.gif" width="300" height="300" /> </p>

🚀 Getting Started

Using npm:

npm i react-dark-mode-toggle

Using yarn:

yarn add react-dark-mode-toggle

✨ Usage

import React, {useState} from "react";
import DarkModeToggle from "react-dark-mode-toggle";

export default () => {
  const [isDarkMode, setIsDarkMode] = useState(() => false);
  return (
    <DarkModeToggle
      onChange={setIsDarkMode}
      checked={isDarkMode}
      size={80}
    />
  );
};

📌 Props

PropTypeDefaultRequired
onChangefuncvalue => nullNo
checkedbooleanfalseNo
sizenumber (defaults to px) or string (px, em, rem, %, etc.)85No
speednumber1.3No
classNamestringnullNo

Note, this is not a dark mode theme implementation; it's just a button! You'll need to mix this with a management solution such as use-dark-mode.

✌️ License

MIT