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 setup>
import { useValue } from "valdres-vue"
import { contrastAtom } from "@valdres/browser-contrast"

const contrast = useValue(contrastAtom) // Ref<Contrast>
</script>

<template>{{ contrast }}</template>

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.