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 { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { prefersReducedTransparencySelector } from "@valdres/browser-reduced-transparency"

@Component({
    selector: "panel-cmp",
    template: `<div [class]="reduce() ? 'opaque' : 'glass'"></div>`,
})
export class PanelCmp {
    reduce = injectValue(prefersReducedTransparencySelector) // Signal<boolean>
}

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.