This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Ambient Light Events give a web application access to a device's ambient light sensor to detect changes in light intensity.
How Does it Work?
When the light sensor of the device detects a change in light intensity, the browser is notified of the change and fires a DeviceLightEvent
event. The event gives information about the light intensity of the device's environment.
The DeviceLightEvent
provides a value attribute with light intensity in lux which is generally treated as shown below.
10 ~ 50 lux : Dim Environment
100 ~ 1000 lux : Normal
> 10000 lux : Bright
It uses the addEventListener
method of the window
object.
window.addEventListener("devicelight", function (event) { // Read out the lux value var luminosity = event.value; alert(luminosity); });
Example:
window.addEventListener('devicelight', function(event) { var bodyBg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('Hey, you! You are working in a dark environment'); bodyBg.backgroundColor="lightgrey"; } else { bodyBg.backgroundColor="#fff"; } });
This example shows how the API can actually be used in the wild. If your app contains a lot of white in the UI, it is usually beneficial to the user to change the UI to a darker color in a darker environment. The code alerts the user that they are working in a dark environment and then changes the page's background to a darker color.
Specifications
Specification | Status | Comment |
---|---|---|
Ambient Light Sensor The definition of 'Ambient Light Events' in that specification. |
Candidate Recommendation | Initial specification |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceLightEvent | Chrome No support No | Edge No support ≤18 — 79 | Firefox
Full support
62
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
62
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
value | Chrome No support No | Edge No support 13 — 79 | Firefox
Full support
62
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
62
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.