Using light sensors

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DeviceLightEvent
ExperimentalNon-standard
Chrome No support NoEdge No support ≤18 — 79Firefox Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 22 — 61
Notes
Notes Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 15 — 61
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
value
ExperimentalNon-standard
Chrome No support NoEdge No support 13 — 79Firefox Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 22 — 61
Notes
Notes Not supported for MacBook with Touch Bar and Windows 7 (see bug 754199).
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 62
Notes Disabled
Full support 62
Notes Disabled
Notes See bug 1462308.
Disabled From version 62: this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 15 — 61
Opera Android No support NoSafari iOS No support NoSamsung 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.

References: