A dark mode toggle component for React. Inspired by Tim Silva's Dark/Light Mode Toggle Switch Pattern A11y Dribbble shot.

📖 Table of Contents

🚀 Getting Started

⚡️ Quick Start

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

import { useState } from 'react';
import { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';
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"
      onChange={(mode) => {
        setMode(mode);
      }}
    />
  );
}

💻 Live Demo

⚙️ Configuration

DarkModeToggle supports the following props:

Prop	Type	Default value	Description
mode	string	`dark`	The color scheme mode.
dark	string	`undefined`	The dark mode label text.
light	string	`undefined`	The light mode label text.
onChange	Function	`undefined`	The callback invoked when the mode changes.
size	string	`sm`	The size of the toggle switch (w/o labels). There are 3 available sizes: `sm` — 48x28px `md` — 72x42px `lg` — 96x56px N.B. If label(s) are used, their font size is going to scale proportionally to the toggle switch as follows: `sm` — 12px `md` — 18px `lg` — 24px
inactiveLabelColor	string	`#b9bdc1`	The color of the label(s) when the toggle switch is in an inactive/off state.
inactiveLabelColorOnHover	string	`#fcfefe`	The color of the label(s) on hover, when the toggle switch is in an inactive/off state.
inactiveLabelColorOnActive	string	`#cdd1d5`	The color of the label(s) on active, when the toggle switch is in an inactive/off state.
activeLabelColor	string	`#5b5e62`	The color of the label(s) when the toggle switch is in an active/on state.
activeLabelColorOnHover	string	`#404346'`	The color of the label(s) on hover, when the toggle switch is in an active/on state.
activeLabelColorOnActive	string	`#010101`	The color of the label(s) on active, when the toggle switch is in an active/on state.
inactiveTrackColor	string	`#dce0e3`	The color of the track when the toggle switch is in an inactive/off state.
inactiveTrackColorOnHover	string	`#fcfefe`	The color of the track on hover, when the toggle switch is in an inactive/off state.
inactiveTrackColorOnActive	string	`#cdd1d5`	The color of the track on active, when the toggle switch is in an inactive/off state.
activeTrackColor	string	`#404346`	The color of the track when the toggle switch is in an active/on state.
activeTrackColorOnHover	string	`#2d2f31`	The color of the track on hover, when the toggle switch is in an active/on state.
activeTrackColorOnActive	string	`#141516`	The color of the track on active, when the toggle switch is in an active/on state.
inactiveThumbColor	string	`#2d2f31`	The color of the thumb when the toggle switch is in an inactive/off state.
activeThumbColor	string	`#dce0e3`	The color of the thumb when the toggle switch is in an active/on state.
focusRingColor	string	`rgb(59 130 246 / 0.5)`	The color of the toggle switch's focus ring.

♿️ Accessibility

In order to comply with the web accessibility standards, we must make use of the ariaLabel prop, like so:

function AccessibleExample() {
  return <DarkModeToggle ariaLabel="Toggle color scheme" />;
}

👨🏼‍⚖️ License

MIT