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;




window.addEventListener('devicelight', function(event) {

var bodyBg=;

//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');


} else {




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. 


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

Browser compatibility

BCD tables only load in the browser