Skip to content
💡Get a user's light level using CSS @​media(light-level)
TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
LICENSE
README.md
_config.yml
index.html
index.test.ts
index.ts
package.json
tsconfig.json
yarn.lock

README.md

💡 Light level

Travis CI Coverage Status GitHub Vulnerabilities NPM type definitions NPM Minzipped size

NPM

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

📝 License

MIT

You can’t perform that action at this time.