Light Levels

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

A vanilla JavaScript plugin for polyfilling the [light-level CSS @media feature].

This media feature can be used to adjust styles based on the ambient light level - however since it's from a relatively recent Working Draft, it currently has zero browser support.

This polyfill detects ambient light levels and applies a corresponding class name to the element in order to emulate the same behaviour today.

It is recommended to combine this plugin with the PostCSS plugin [postcss-light-levels] which allows you to write the upcoming syntax but uses it to generate class names which correlate to the ones generated by this library.

It is worth nothing that both this JS library and PostCSS plugin can be used independently if you wish.

[light-level css @media feature]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/light-level
[postcss-light-levels]: https://github.com/daveordead/postcss-light-levels
[build-badge]: https://travis-ci.com/DaveOrDead/light-levels.svg?branch=master
[build]: https://travis-ci.com/DaveOrDead/light-levels
[npm-badge]: https://raster.shields.io/npm/v/light-levels.png
[npm]: https://www.npmjs.com/package/light-levels
[coveralls-badge]: https://coveralls.io/repos/github/DaveOrDead/light-levels/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/DaveOrDead/light-levels?branch=master

Table of Contents

- Demo
- Browser Support
- Installation
- npm
- CDN
- Usage
- ES Module
- CommonJS
- UMD
- CSS
- Options
- License

Demo

A working demo can be found here: https://daveordead.github.io/light-levels-demo/

Browser Support

|
Edge |
Firefox |
Android Firefox |
Chrome |
Android Chrome |
| --------- | --------- | --------- | --------- | --------- |
| 16 | 62 :triangular_flag_on_post: | 62 :triangular_flag_on_post: | 54 :checkered_flag: | 54 :checkered_flag: |

:triangular_flag_on_post: uses deprecated ondevicelight behind the device.sensors.ambientLight.enabled feature flag

:checkered_flag: Uses AmbientLightSensor behind the #enable-generic-sensor-extra-classes feature flag

Installation

$3

``sh
npm install light-levels --save
`

$3

`html

`
A vanilla JavaScript plugin for polyfilling the light-level CSS @media feature.

Usage

$3

`js
import lightLevels from "light-levels";

lightLevels();
`

$3

`js
const lightLevels = require("light-levels");

lightLevels();
`

$3

If you use the direct
`

$3

By default this plugin applies classes of .light-level-dim, .light-level-normal or .light-level-washed to match the values of the light-level media query.

`css
/ Styles to apply in low light environments /
.light-level-dim p {
background-color: black;
color: white;
}

/ Styles to apply in normal light environments /
.light-level-normal p {
background-color: white;
color: black;
}

/ Styles to apply in bright light environments /
.light-level-washed p {
background-color: pink;
color: orange;
}
`

$3

`js
lightLevels({
prefix: "light-level-"
});
`

| Name | Usage | Default |
| ----------- | ----- | ------- |
| prefix | if the prefix light-level-` doesn't suit your code base, you can change it to something more appropriate with this option. Note: The postfix names of ['dim' \ 'normal' \ 'washed'] can not be modified. If you are using this in combination with the PostCSS plugin you should also update the prefix option there. | 'light-level-' |

License

Copyright (c) 2020 David Berner

Licensed under the MIT license _(see LICENSE.md for more details)_