Fully Released Team GOATS from Holmesglen Svelte Toggle Switches functionality is done for you, no tedious research and bug fixing just for Light & Dark mode!

Toggles

Current Toggles

| Name | Import Statement | Description | -------------------------|--------------------------|---------------| |Basic | svelte-toggles/src/Basic | Sun Morphs into Crescent Moon | |Horizon | svelte-toggles/src/Horizon | Sun falls behind Horizon | |Rays | svelte-toggles/src/Rays | Sun w Rays morphs into Crescent Moon | |Simple | svelte-toggles/src/Simple | Sun Morphs into Moon |

Get Started

Check your Local Storage for your Light value when the Sun is visible

To install and set up the library, run:

npm i svelte-toggles

Or if you prefer using Yarn:

yarn add svelte-toggles

Usage

Import our Toggle like this (For Example);

import Basic from 'svelte-toggles/src/Basic'

<Basic/>

Properties

[+] size

Change the size of the toggle

Type: String

You can select from; small, medium or large (Default: medium)

Example use below:

<Basic size="small"/>

[+] Fill

Change the Colour of the Toggle according to the State

Type: String

[+] lightFill

Colour of Toggle when Light Value is present

[+] darkFill

Colour of Toggle when NO Light Value is present

You can select from; Any take HEX or RGBA code

Default Light: #24282E | Default Dark: #FACB26

Example use below:

<Basic lightFill="#ff0000" darkFill="#ff03f5"/>

<Basic lightFill="255, 255, 255" darkFill="0, 0, 0"/>

Known Bugs

Inspiration

Inspired by the React Toggles library; toggles.dev

Special Thanks

Our Teachers throughout our Diploma; Daniel & Alex

Waqas Ahmad on helping develop the "Rays" SVG Animation