svelte-dark-mode-toggle

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

Demo

REPL Link

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!