🧖 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