🌃 Animated dark mode toggle as seen in blogs!
Supports React 16.14+ through 19.
- node >=20
npm i react-toggle-dark-modeor with pnpm:
pnpm add react-toggle-dark-modeimport * as React from 'react';
import { createRoot } from 'react-dom/client';
import { DarkModeSwitch } from 'react-toggle-dark-mode';
const App = () => {
const [isDarkMode, setDarkMode] = React.useState(false);
const toggleDarkMode = (checked: boolean) => {
setDarkMode(checked);
};
return (
<DarkModeSwitch
style={{ marginBottom: '2rem' }}
checked={isDarkMode}
onChange={toggleDarkMode}
size={120}
/>
);
};
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error('Unable to find root element');
}
createRoot(rootElement).render(<App />);| Name | Type | Default Value | Description |
|---|---|---|---|
| onChange | (checked: boolean) => void | Event that triggers when icon is clicked. | |
| checked | boolean | false | Current icon state. |
| style | React.CSSProperties | CSS properties object applied to the button wrapper. | |
| size | number | string | 24 | SVG size. |
| animationProperties | Partial animation properties object | defaultProperties (see below) | Override only the fields you want; missing fields are merged with defaults. |
| moonColor | string | white | Color of the moon. |
| sunColor | string | black | Color of the sun. |
| aria-label | string | Toggle dark mode | Accessible label for the control. Ignored when aria-labelledby is provided. |
| aria-labelledby | string | Links the control to an external label element. | |
| onClick | (event: React.MouseEvent)=>void | Optional button click handler. Call event.preventDefault() to prevent toggling on click. |
All valid button attributes (except children) are forwarded to the underlying button element.
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 },
};Thanks goes to these wonderful people (emoji key):
Jose Felix 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
Give a ⭐️ if this project helped you!