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

import { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { contrastAtom } from "@valdres/browser-contrast"

@Component({
    selector: "contrast-badge",
    template: `{{ contrast() }}`,
})
export class ContrastBadge {
    contrast = injectValue(contrastAtom) // Signal<Contrast>
}

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.