Light level is a package that tells you a user's preferred light level. It's based on the CSS @media (light-level)
, which is part of Media Queries Level 5. It's around 700 bytes minified, 300 bytes gzipped.
Add the dependency from NPM:
npm install light-level-css
Import the package:
import lightLevel from "light-level-css";
Then call the function:
const lightPreference = lightLevel();
// Returns "dim", "washed" or "normal"
This package only works in browsers that natively support @media (light-level)
, so it just returns "normal"
in unsupported browsers. Current browser support
By passing false
as the argument, you can get "unsupported"
as the value for unsupported browsers:
const lightPreference = lightLevel(false);
// Returns "dim", "washed", "normal", 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