dark-mode-toggle

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
- 💻 Live Demo
- ⚙️ Configuration
- ♿️ Accessibility
- 👨🏼‍⚖️ License

🚀 Getting Started

$3

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

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

function Example() {
const [mode, setMode] = useState('dark');
return (
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);
}}
/>
);
}
`

$3

![Open in CodeSandbox](https://codesandbox.io/s/demo-for-anatoliygatt-dark-mode-toggle-s0thsv)

⚙️ 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:

`jsx
function AccessibleExample() {
return ;
}
``

👨🏼‍⚖️ License

MIT