Web/API/Ambient Light Events

This is an experimental technologyCheck 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 (in lux units).

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 SensorThe definition of 'Ambient Light Events' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DeviceLightEvent` Experimental'Non-standard'	Chrome No support No	Edge No support ≤18 — 79	Firefox 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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox 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 No	Safari iOS No support No	Samsung Internet Android No support No
`value` Experimental'Non-standard'	Chrome No support No	Edge No support 13 — 79	Firefox 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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox 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 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.