A customizable dark mode toggle switch component for React.

How to use it:

1. Install & download.

npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled

2. Import the DarkModeToggle component.

import { useState } from 'react';
import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';

3. Add the dark mode toggle to the app.

function Example() {
  const [mode, setMode] = useState('dark');
  return (
    <DarkModeToggle
      mode={mode}
      dark="Dark"
      light="Light"
      size="lg"
      inactiveTrackColor="#e2e8f0"
      inactiveTrackColorOnHover="#f8fafc"
      inactiveTrackColorOnActive="#cbd5e1"
      activeTrackColor="#334155"
      activeTrackColorOnHover="#1e293b"
      activeTrackColorOnActive="#0f172a"
      inactiveThumbColor="#1e293b"
      activeThumbColor="#e2e8f0"
      ariaLabel="Toggle color scheme"
      onChange={(mode) => {
        setMode(mode);
      }}
    />
  );
}

4. Default component props.

mode="dark",
dark,
light,
onChange,
size="sm", // lg, md
inactiveLabelColor="#b9bdc1",
inactiveLabelColorOnHover="#fcfefe",
inactiveLabelColorOnActive="#cdd1d5",
activeLabelColor="#5b5e62",
activeLabelColorOnHover="#404346",
activeLabelColorOnActive="#010101",
inactiveTrackColor="#dce0e3",
inactiveTrackColorOnHover="#fcfefe",
inactiveTrackColorOnActive="#cdd1d5",
activeTrackColor="#404346",
activeTrackColorOnHover="#2d2f31",
activeTrackColorOnActive="#141516",
inactiveThumbColor="#2d2f31",
activeThumbColor="#dce0e3",
focusRingColor="rgb(59 130 246 / 0.5)",
ariaLabel,

Preview:

Download Details:

Author: anatoliygatt

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/anatoliygatt/dark-mode-toggle

License: MIT