Schemable Svelte
schemable-svelte
Svelte action which sets the class of an element based, reactively, on either
the media feature prefers-color-scheme or a provided preference.
- No dependencies beyond svelte
- SSR ready, packaged with svelte kit
pnpm add -D schemable-svelte
# npm install -D schemable-svelte
# yarn add -D schemable-svelte
Usage
<script>
import { schemable } from "schemable-svelte";
</script>
<svelte:body use:schemable />
Upon first initialization, scheamble creates a store which fetches the value of
prefers-color-scheme and sets it in context. The store wires up event
listeners for changes to the media query. If preference is not provided, the
value of prefers-color-scheme is used to lookup the class to assign to the
Element with the action (likely <svelte:body>).
If a value for preference is passed to the option, it is considered an override
and promoted to the new value. preference can either be a string or a
readable store.
If the value of preference is a string, a new store is created that persists
the value to localstorage.
The media query store is available as mediaSchemeStore. If the localStorage
variant is utilized, it is avaiable asschemePreferenceStore.
Options
| Option | Description |
|---|---|
preference |
Overrides prefers-color-scheme. This can either be a value or a readable store. |
defaultScheme |
Default value to utilize if prefers-color-scheme does not have a value and preferences is not set. |
dark |
class to use for dark schemes. Defaults to "dark" |
light |
class to use for light schemes. Defaults to "light" |
Events
| Event | Description | detail |
|---|---|---|
"preferscolorschemechange" |
the value of prefers-color-scheme has changed. |
string |
"colorschemechange" |
the color scheme has changed, either through the provided preference or from the media feature prefers-color-scheme |
string | null |
Contributing
Pull requests are always welcome.
License
