1.1.0 • Published 10 months ago
react-light-dark-toggle v1.1.0
React Light Dark Toggle
A customizable React switch for changing between light and dark mode.
Examples
Regular
Styled Like the Google Fonts Toggle
Install
npm i react-light-dark-toggleUsage and Demo
Documentation
Component Props
| 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 | | |||
| darkBorderColor | 'grey' | |||
| lightBorderColor | 'lightgrey' | |||
| darkBackgroundColor | '#222222' | |||
| lightBackgroundColor | '#EEEEEE' |