Get a user's light level preference using CSS @media light-level
npm install light-level-css


!Vulnerabilities
!NPM type definitions



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:
``bash`
npm install light-level-css
Import the package:
`js`
import lightLevel from "light-level-css";
Then call the function:
`js`
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:
`js`
const lightPreference = lightLevel(false);
// Returns "dim", "washed", "normal", or "unsupported"
Install dependencies:
`bash`
yarn
Compile Typescript to ES6 before publishing to NPM:
`bash`
yarn build
- 🙅 prefers-reduced-motion · GitHub · NPMprefers-color-scheme
- 🎨 · GitHub · NPMprefers-contrast
- 🕶️ · GitHub · NPMprefers-reduced-transparency
- 🎞️ · GitHub · NPMinverted-colors
- 🌑 · GitHub · NPMenvironment-blending
- 🧖 · GitHub · NPMlight-level` · GitHub · NPM
- 💡
MIT