> 🌃 Animated dark mode toggle as seen in blogs!

!Interactive sun and moon transition

Prerequisites

- node >=10

Installation

``shell
npm i react-toggle-dark-mode
`

or with Yarn:

`shell
yarn add react-toggle-dark-mode
`

Usage

`jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DarkModeSwitch } from 'react-toggle-dark-mode';

const App = () => {
const [isDarkMode, setDarkMode] = React.useState(false);

const toggleDarkMode = (checked: boolean) => {
setDarkMode(checked);
};

return (
style={{ marginBottom: '2rem' }}
checked={isDarkMode}
onChange={toggleDarkMode}
size={120}
/>
);
};
`

API

$3

#### Props

| Name | Type | Default Value | Description |
| ------------------- | ---------------------------- | ------------------------------- | ----------------------------------------- |
| onChange | \(checked: boolean\) => void | | Event that triggers when icon is clicked. |
| checked | boolean | false | Current icon state. |
| style | Object | | CSS properties object. |
| size | number | 24 | SVG size. |
| animationProperties | Object | defaultProperties \(see below\) | Override default animation properties. |
| moonColor | string | white | Color of the moon. |
| sunColor | string | black | Color of the sun. |

$3

`javascript
const defaultProperties = {
dark: {
circle: {
r: 9,
},
mask: {
cx: '50%',
cy: '23%',
},
svg: {
transform: 'rotate(40deg)',
},
lines: {
opacity: 0,
},
},
light: {
circle: {
r: 5,
},
mask: {
cx: '100%',
cy: '0%',
},
svg: {
transform: 'rotate(90deg)',
},
lines: {
opacity: 1,
},
},
springConfig: { mass: 4, tension: 250, friction: 35 },
};
``

Contributors

Thanks goes to these wonderful people (emoji key):

Jose Felix 💻 📖 ⚠️

This project follows the all-contributors specification.
Contributions of any kind are welcome!

Show your support

Give a ⭐️ if this project helped you!