browser-reduced-transparency

Read-only global atom + boolean selector for the (prefers-reduced-transparency: reduce) media query.

Install

bun add @valdres/browser-reduced-transparency

Live example

Toggle "Reduce transparency" in your OS accessibility settings.

Usage

import { useValue } from "valdres-react"
import { prefersReducedTransparencySelector } from "@valdres/browser-reduced-transparency"

function Panel() {
    const reduce = useValue(prefersReducedTransparencySelector)
    return <div className={reduce ? "opaque" : "glass"} />
}

Exports

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.