browser-reduced-transparency
Read-only global atom + boolean selector for the (prefers-reduced-transparency: reduce) media query.
Install
bun add @valdres/browser-reduced-transparencyLive example
Loading demo…
Toggle "Reduce transparency" in your OS accessibility settings.
Usage
<script>
import { watch } from "valdres-svelte"
import { prefersReducedTransparencySelector } from "@valdres/browser-reduced-transparency"
const reduce = watch(prefersReducedTransparencySelector)
</script>
<div class={reduce.value ? "opaque" : "glass"} />Exports
| Export | Kind | Type |
|---|---|---|
reducedTransparencyAtom | atom (read-only) | "no-preference" | "reduce" |
prefersReducedTransparencySelector | selector | boolean |
ReducedTransparency | type | "no-preference" | "reduce" |
Cross-framework
Global state — only the read primitive's name changes per framework (useValue, createValue, injectValue, watch, or store.get / store.sub in plain JS). The media-query subscription starts on the first subscriber across all stores and stops when the last leaves.