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