svelte-toggles v2.1.7

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

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