🌃 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):

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

Show your support

Give a ⭐️ if this project helped you!