browser-contrast

Wraps the prefers-contrast media query as a global atom ("no-preference" | "more" | "less" | "custom"), plus boolean selectors for the more/less cases.

Install

bun add @valdres/browser-contrast

Live example

Usage

<script>
import { watch } from "valdres-svelte"
import { contrastAtom } from "@valdres/browser-contrast"

const contrast = watch(contrastAtom)
</script>

{contrast.value}

Exports

Cross-framework

contrastAtom is global: identical in every framework, only the read primitive's name changes (useValue, createValue, injectValue, watch, or store.get / store.sub in plain JS). The browser subscription starts on the first subscriber across all stores and stops when the last leaves.