svelte-dark-mode-toggle
SvelteJS component for toggling dark mode. There's just a button with cute animation without dark mode logic realization.
Demo
Installation
npm install svelte-dark-mode-toggle
Or with Yarn
yarn add svelte-dark-mode-toggle
Usage
<script>
import DarkModeToggle from 'svelte-dark-mode-toggle'
let darkMode = false
</script>
<h1>The simpliest usage</h1>
<DarkModeToggle {darkMode} on:click={() => darkMode = !darkMode}/>
API
Props
| 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 |
Events
| Event Name | Description |
|---|---|
| click | Classic click event |
License
MIT
Show your support
Give a ⭐️ if this project helped you!
