mediaQuery

Readable Media Query. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

Demo

isLargeScreen:
false
prefersDark:
false

Usage

<script lang="ts">
import { mediaQuery } from "svelte-legos";

const isLargeScreen = mediaQuery("(min-width: 1024px)"); // $isLargeScreen => true | false
const prefersDark = mediaQuery("(prefers-color-scheme: dark)");  // $prefersDark => true | false
</script>