Inverted colors is a package that tells you whether a user prefers inverted colors. It's based on the CSS @media (inverted-colors)
, which is part of Media Queries Level 5. It's around 700 bytes minified, 300 bytes gzipped.
Add the dependency from NPM:
npm install inverted-colors
Import the package:
import invertedColors from "inverted-colors";
Then call the function:
const colorPreference = invertedColors();
// Returns "none" or "inverted"
This package only works in browsers that natively support @media (inverted-colors)
, so it just returns "none"
in unsupported browsers. Current browser support
By passing false
as the argument, you can get "unsupported"
as the value for unsupported browsers:
const colorPreference = invertedColors(false);
// Returns "inverted", "none", or "unsupported"
Install dependencies:
yarn
Compile Typescript to ES6 before publishing to NPM:
yarn build
- π
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
MIT