This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

svelte-mq-store

📱 Create any media-query store in Svelte

Demo

Installation

npm i svelte-mq-store

Usage

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

<script>
  import { listen } from 'svelte-mq-store'

  let isDark = $derived(listen('(prefers-color-scheme: dark)'))
</script>

{#if isDark.v}
  Device is dark mode
{:else}
  Device is light mode
{/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).

import { listen } from 'svelte-mq-store'

let isDark = $derived(
  listen(
    '(prefers-color-scheme: dark)',
    false // fallback value
  )
)

License

MIT