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'