This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ambient light events are a handy way to make a web page or an application aware of any change in the light intensity. It allows them to react to such a change, for example by changing the color contrast of the User Interface (UI) or by changing the exposure necessary to take a picture.

Light Events

When the light sensor of a device detects a change in the light level, it notifies the browser of that change. When the browser gets such a notification, it fires a DeviceLightEvent event that provides information about the exact light intensity.

This event can be captured at the window object level by using the addEventListener method (using the devicelight event name) or by attaching an event handler to the window.ondevicelight property.

Once captured, the event object gives access to the light intensity expressed in lux through the DeviceLightEvent.value property.

Example

if ('ondevicelight' in window) {
  window.addEventListener('devicelight', function(event) {
    var body = document.querySelector('body');
    if (event.value < 50) {
      body.classList.add('darklight');
      body.classList.remove('brightlight');
    } else {
      body.classList.add('brightlight');
      body.classList.remove('darklight');
    }
  });
} else {
  console.log('devicelight event not supported');
}

Specifications

Specification Status Comment
Ambient Light Sensor
The definition of 'Ambient Light Events' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No Yes

60 — 621 2

223

No No No
value No Yes22 — 62 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No Yes

60 — 621 2

15

No No ?
value No No Yes15 — 62 No No ?

1. See bug 1359076 and bug 1462308.

2. From version 60 until version 62 (exclusive): this feature is behind the device.sensors.ambientLight.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Not supported for macbook with touchbar and Windows 7.

 

See also

Document Tags and Contributors

Tags: 
Last updated by: fscholz,