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

<script setup>
import { useValue } from "valdres-vue"
import { prefersReducedTransparencySelector } from "@valdres/browser-reduced-transparency"

const reduce = useValue(prefersReducedTransparencySelector) // Ref<boolean>
</script>

<template><div :class="reduce ? 'opaque' : 'glass'" /></template>

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.