https://github.com/chanced/schemable-svelte

svelte action for class decoration derived from media queries or user preferences.
https://github.com/chanced/schemable-svelte

dark-mode light-mode media-queries scheme svelte

Last synced: 3 months ago
JSON representation

svelte action for class decoration derived from media queries or user preferences.

• Host: GitHub
• URL: https://github.com/chanced/schemable-svelte
• Owner: chanced
• License: mit
• Created: 2021-10-10T04:04:24.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-11T19:32:33.000Z (about 3 years ago)
• Last Synced: 2024-10-04T18:46:59.177Z (3 months ago)
• Topics: dark-mode, light-mode, media-queries, scheme, svelte
• Language: TypeScript
• Homepage:
• Size: 62.5 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```bash

pnpm add -D schemable-svelte

# npm install -D schemable-svelte

# yarn add -D schemable-svelte

```

## Usage

```html

	import { schemable } from "schemable-svelte";

```

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 ``).

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 as`schemePreferenceStore`.

### 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](https://choosealicense.com/licenses/mit/)