# browser-reduced-transparency

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

## Install

```bash
bun add @valdres/browser-reduced-transparency
```

## Live example

▶ Live example: [https://valdres.dev/svelte/plugins/browser-reduced-transparency](https://valdres.dev/svelte/plugins/browser-reduced-transparency)

Toggle "Reduce transparency" in your OS accessibility settings.

## Usage

```svelte
<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.