Media Query Stores

Media queries are exposed as Svelte stores. This allows you to easily subscribe to handle changing values.

prefersColorSchemeDark

A Svelte store that keeps a boolean up to date if the prefers-color-scheme media query matches ‘dark’.

<script lang="ts">import { prefersColorSchemeDark } from '@geoffcox/sterling-svelte';
</script>

<div>The user prefers dark mode: {$prefersColorSchemeDark}</div>

prefersReducedMotion

A Svelte store that keeps a boolean up to date if the prefers-reduced-motion media query matches ‘reduce’.

<script lang="ts">import { prefersReducedMotion } from '@geoffcox/sterling-svelte';
</script>

<div>The user prefers reduced motion: {$prefersReducedMotion}</div>

usingKeyboard

A Svelte store that keeps a boolean up to date if the user is typing on the keyboard. This is a wrapper around Keyborg’s value.

<script lang="ts">import { usingKeyboard } from '@geoffcox/sterling-svelte';
</script>

<div>The user is currently using the keyboard: {$usingKeyboard}</div>