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'

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

{#if $isDark}
  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'

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

License

MIT