# 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

```bash
bun add @valdres/browser-contrast
```

## Live example

▶ Live example: [https://valdres.dev/solid/plugins/browser-contrast](https://valdres.dev/solid/plugins/browser-contrast)

## Usage

```tsx
import { createValue } from "valdres-solid"
import { contrastAtom } from "@valdres/browser-contrast"

function ContrastBadge() {
    const contrast = createValue(contrastAtom) // () => Contrast
    return <span>{contrast()}</span>
}
```

## Exports

| Export                        | Kind             | Type                                              |
| ----------------------------- | ---------------- | ------------------------------------------------- |
| `contrastAtom`                | atom (read-only) | `Contrast`                                        |
| `prefersMoreContrastSelector` | selector         | `boolean`                                         |
| `prefersLessContrastSelector` | selector         | `boolean`                                         |
| `Contrast`                    | type             | `"no-preference" \| "more" \| "less" \| "custom"` |

## 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.