🧖 Environment blending

Environment blending is a package that tells you a user's environment blending preferences. It's based on the CSS @media (environment-blending), which is part of Media Queries Level 5. It's around 700 bytes minified, 300 bytes gzipped.

⭐ Usage

Add the dependency from NPM:

npm install environment-blending

Import the package:

import envBlending from "environment-blending";

Then call the function:

const contrastPreference = envBlending();
// Returns "additive", "subtractive" or "opaque"

💡 Browser support

This package only works in browsers that natively support @media (environment-blending), so it just returns "opaque" in unsupported browsers. Current browser support

By passing false as the argument, you can get "unsupported" as the value for unsupported browsers:

const contrastPreference = envBlending(false);
// Returns "additive", "subtractive", "opaque", or "unsupported"

🛠️ Development

Install dependencies:

yarn

Compile Typescript to ES6 before publishing to NPM:

yarn build

📀 Media Queries Level 5

• 🙅 prefers-reduced-motion · GitHub · NPM
• 🎨 prefers-color-scheme · GitHub · NPM
• 🕶️ prefers-contrast · GitHub · NPM
• 🎞️ prefers-reduced-transparency · GitHub · NPM
• 🌑 inverted-colors · GitHub · NPM
• 🧖 environment-blending · GitHub · NPM
• 💡 light-level · GitHub · NPM

📝 License

MIT