A customizable React switch for changing between light and dark mode.
npm i react-light-dark-toggle| Property | PropType | Required | Default | Description |
|---|---|---|---|---|
| sunIconComponent | `` | () => <img src={SunIconSrc} alt="light" /> |
The component representing the light mode (sun) icon | |
| moonIconComponent | `` | () => <img src={MoonIconSrc} alt="dark" /> |
The component representing the dark mode (moon) icon | |
| showSunTransform | `` | 'translateY(0) translateX(-1em)' |
The transform to apply when showing the sun icon | |
| hideSunTransform | `` | 'translateY(4em) translateX(-1em)' |
The transform to apply when hiding the sun icon | |
| showMoonTransform | `` | 'translateY(0) translateX(1em)' |
The transform to apply when showing the moon icon | |
| hideMoonTransform | `` | 'translateY(-4em) translateX(1em)' |
The transform to apply when hiding the moon icon | |
| showSunFilter | `` | '' |
The filter to apply when showing the sun icon | |
| hideSunFilter | `` | '' |
The filter to apply when hiding the sun icon | |
| showMoonFilter | `` | '' |
The filter to apply when showing the moon icon | |
| hideMoonFilter | `` | '' |
The filter to apply when hiding the moon icon | |
| transitionDuration | `` | '750ms' |
How long transitions should take (in ms) | |
| onToggle | `` | The action to apply on clicking the toggle | ||
| darkBorderColor | `` | 'grey' |
||
| lightBorderColor | `` | 'lightgrey' |
||
| darkBackgroundColor | `` | '#222222' |
||
| lightBackgroundColor | `` | '#EEEEEE' |