svelte-dark-mode-toggle


SvelteJS component for toggling dark mode. There's just a button with cute animation without dark mode logic realization.

!Dark mode toggle transition

Demo

REPL Link

Installation

``bash
npm install svelte-dark-mode-toggle
`

Or with Yarn

`bash
yarn add svelte-dark-mode-toggle
`

Usage

`svelte

The simpliest usage

darkMode = !darkMode}/>

``

API

$3

| Name | Type | Default Value | Description |
| ------------------- | ---------------------------- | ------------------------------- | ----------------------------------------- |
| darkMode | boolean | | Current mode state |
| size | string | 28px | Size of component (passed to svg) |
| title | string | Toggle dark mode | Hint on hover (passed to button) |
| lightModeColor | string | #000000 | Color of sun |
| lightModeHover | string | #292828 | Color of sun of hover |
| darkModeColor | string | #FFFFFF | Color of the moon. |
| darkModeHover | string | #e6e6e6 | Color of the moon on hover |
| animationDuration | string | .25s | transition-duration value |
| animationDelay | string | .25s | transition-delay value for moon transformation |

$3

| Event Name | Description |
| ---------- | -------------------- |
| click | Classic click event |

License

MIT

Show your support

Give a ⭐️ if this project helped you!