dark-mode-toggle
## 📖 Table of Contents
- [🚀 Getting Started](#-getting-started)
- [⚡️ Quick Start](#%EF%B8%8F-quick-start)
- [💻 Live Demo](#-live-demo)
- [⚙️ Configuration](#%EF%B8%8F-configuration)
- [♿️ Accessibility](#%EF%B8%8F-accessibility)
- [👨🏼⚖️ License](#%EF%B8%8F-license)
## 🚀 Getting Started
### ⚡️ Quick Start
```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 (
{
setMode(mode);
}}
/>
);
}
```
### 💻 Live Demo
[](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](https://github.com/anatoliygatt/dark-mode-toggle/blob/master/LICENSE)
