TypeScript icon, indicating that this package has built-in type declarations

2.0.3-1 • Public • Published


Rewrite of a cute dark mode toggle 🦉

Original library react-dark-mode-toggle was created by Alex Thoma. Credit goes out to those who helped build that library to what it is today. Let's see if we can take it even further.

latest release latest release code language: typescript vitejs code style: prettier

  • Switches out emotion for goober from the original repository.

This rewrite:

  • Adds native TS support
  • Adds Rollup bundling support (ESM/CJS output targets)
  • Adds CSS vendor prefixing via Emotion
  • Resolves issue where prop checked is true but the toggle initially renders in light-mode then snaps to dark-mode
  • Updates react-lottie-player to latest for TS support & to fix the above flickering problem
  • Project infrastructure (e.g. prettier, husky, lint-staged, etc.)

How it works

react-lottie-player is used to render a Lottie file (i.e. a JSON payload) in a React component we call DarkModeToggle. This underlying library is a peer dependency of the project which is why you'll see it in the installation instructions below.

🚀 Installation

npm i react-dark-mode-toggle-2
yarn add react-dark-mode-toggle-2


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

export const YourComponent = () => {
  const [isDarkMode, setIsDarkMode] = React.useState(false);
  return (

📌 Props

Prop Type Default Required
onChange func N/A Yes
isDarkMode boolean N/A Yes
size number (defaults to px) or a string containing a number+unit (e.g "10px", "2em", "4.5rem", "100%", etc). These units may also have a space between them (e.g. "10 px", "2 em", etc). 85px No
speed number 1.3 No
className string '' No

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.

📝 Notes

In Chrome, you may experience a blue outline around the toggle button after clicking it. If this behavior concerns you see this issue for more information and available workarounds.

✌️ License



npm i @agney/react-dark-mode-toggle

DownloadsWeekly Downloads






Unpacked Size

970 kB

Total Files


Last publish


  • agney