🌃 Animated dark mode toggle as seen in blogs!

Supports React 16.14+ through 19.

Prerequisites

• node >=20

Installation

npm i react-toggle-dark-mode

or with pnpm:

pnpm add react-toggle-dark-mode

Usage

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { DarkModeSwitch } from 'react-toggle-dark-mode';

const App = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);

  const toggleDarkMode = (checked: boolean) => {
    setDarkMode(checked);
  };

  return (
    <DarkModeSwitch
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode}
      onChange={toggleDarkMode}
      size={120}
    />
  );
};

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Unable to find root element');
}

createRoot(rootElement).render(<App />);

API

DarkModeSwitch

Props

Name	Type	Default Value	Description
onChange	(checked: boolean) => void		Event that triggers when icon is clicked.
checked	boolean	false	Current icon state.
style	React.CSSProperties		CSS properties object applied to the button wrapper.
size	number | string	24	SVG size.
animationProperties	Partial animation properties object	defaultProperties (see below)	Override only the fields you want; missing fields are merged with defaults.
moonColor	string	white	Color of the moon.
sunColor	string	black	Color of the sun.
aria-label	string	Toggle dark mode	Accessible label for the control. Ignored when aria-labelledby is provided.
aria-labelledby	string		Links the control to an external label element.
onClick	(event: React.MouseEvent)=>void		Optional button click handler. Call event.preventDefault() to prevent toggling on click.

All valid button attributes (except children) are forwarded to the underlying button element.

Default Animation Properties

const defaultProperties = {
  dark: {
    circle: {
      r: 9,
    },
    mask: {
      cx: '50%',
      cy: '23%',
    },
    svg: {
      transform: 'rotate(40deg)',
    },
    lines: {
      opacity: 0,
    },
  },
  light: {
    circle: {
      r: 5,
    },
    mask: {
      cx: '100%',
      cy: '0%',
    },
    svg: {
      transform: 'rotate(90deg)',
    },
    lines: {
      opacity: 1,
    },
  },
  springConfig: { mass: 4, tension: 250, friction: 35 },
};

Contributors

Thanks goes to these wonderful people (emoji key):

Jose Felix 💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!

Show your support

Give a ⭐️ if this project helped you!