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-toggle

Usage and Demo

Visit The Storybook Page

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 | | | | The action to apply on clicking the toggle | | darkBorderColor | | | `'grey'` | | | lightBorderColor | | | 'lightgrey' | | | darkBackgroundColor | | | `'#222222'` | | | lightBackgroundColor | | | '#EEEEEE' | |