Media Query

Reactive Media Query.

Usage

<script>
    import {mediaQuery} from "@sveu/browser"

    const dark = mediaQuery("(prefers-color-scheme: dark)")

    const reduced = mediaQuery("(prefers-reduced-motion: reduce)")

    const more = mediaQuery("(prefers-contrast: more)")

    const less = mediaQuery("(prefers-contrast: less)")

    const custom = mediaQuery("(prefers-contrast: custom)")
</script>
<script>
    import {mediaQuery} from "@sveu/browser"

    const dark = mediaQuery("(prefers-color-scheme: dark)")

    const reduced = mediaQuery("(prefers-reduced-motion: reduce)")

    const more = mediaQuery("(prefers-contrast: more)")

    const less = mediaQuery("(prefers-contrast: less)")

    const custom = mediaQuery("(prefers-contrast: custom)")
</script>
svelte

Example

Prefers Dark: false

Prefers Reduce Motion: false

Prefers Contrast: no-preference

<script lang="ts">
    import { mediaQuery } from "@sveu/browser"

    const dark = mediaQuery("(prefers-color-scheme: dark)")

    const reduced = mediaQuery("(prefers-reduced-motion: reduce)")

    const more = mediaQuery("(prefers-contrast: more)")

    const less = mediaQuery("(prefers-contrast: less)")

    const custom = mediaQuery("(prefers-contrast: custom)")

    let contrast = "no-preference"

    $: if ($more) contrast = "more"

    $: if ($less) contrast = "less"

    $: if ($custom) contrast = "custom"

    $: if (!$more && !$less && !$custom) contrast = "no-preference"
</script>

<div class="text-center">
    <h1>Prefers Dark: {$dark}</h1>

    <h1>Prefers Reduce Motion: {$reduced}</h1>

    <h1>Prefers Contrast: {contrast}</h1>
</div>
<script lang="ts">
    import { mediaQuery } from "@sveu/browser"

    const dark = mediaQuery("(prefers-color-scheme: dark)")

    const reduced = mediaQuery("(prefers-reduced-motion: reduce)")

    const more = mediaQuery("(prefers-contrast: more)")

    const less = mediaQuery("(prefers-contrast: less)")

    const custom = mediaQuery("(prefers-contrast: custom)")

    let contrast = "no-preference"

    $: if ($more) contrast = "more"

    $: if ($less) contrast = "less"

    $: if ($custom) contrast = "custom"

    $: if (!$more && !$less && !$custom) contrast = "no-preference"
</script>

<div class="text-center">
    <h1>Prefers Dark: {$dark}</h1>

    <h1>Prefers Reduce Motion: {$reduced}</h1>

    <h1>Prefers Contrast: {contrast}</h1>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Click fold/expand code

API

Arguments

Name Description Type Required
query Media Query string Yes
Last update at: Invalid Date