schemable-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    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

    MIT

    Keywords

    none

    Install

    npm i schemable-svelte

    DownloadsWeekly Downloads

    6

    Version

    0.0.5

    License

    mit

    Unpacked Size

    15 kB

    Total Files

    12

    Last publish

    Collaborators

    • chanced