💡 Light level
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.
⭐ Usage
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"
💡 Browser support
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"
🛠️ 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