svelte-mq-store

📱 Create any media-query store in Svelte

Demo

Installation

1npm i svelte-mq-store

Usage

Use the listen to subscribe to the contents of any media query.

1<script>
2  import { listen } from 'svelte-mq-store'
3
4  let isDark = $derived(listen('(prefers-color-scheme: dark)'))
5</script>
6
7{#if isDark.v}
8  Device is dark mode
9{:else}
10  Device is light mode
11{/if}

Fallback in Server

Media queries are available only in the browser.
The fallback value used by the server during SSR can be specified as the second argument. (default is undefined).

1import { listen } from 'svelte-mq-store'
2
3let isDark = $derived(
4  listen(
5    '(prefers-color-scheme: dark)',
6    false // fallback value
7  )
8)

License

MIT