Responsive design. Light Response

Recently, more and more mobile devices have appeared that not only determine the illumination around, but also appropriately change the information displayed on the screen to a more convenient and readable look.

Now this feature is slowly moving into the engines of mobile browsers.

The article will consider an example of how a web page in a browser responds to ambient light.

Ambient Light Events API

To implement the response of the page to illumination, we will use Ambient Light Events . This is part of the HTML5 Device APIs that allows you to interact with device services. Ambient Light Events give access to the light sensor using JavaScript.

Light events

The browser fires a DeviceLight event when the sensor detects a change in light level. We will catch it. In the event, the browser also transmits the light level transmitted from the sensor.

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

Now, when the light changes, the console will get information about the current level.

Learning a page to respond to light.

To demonstrate the possibilities, we will use three page styles, which will be replaced with the desired one depending on the lighting:

• at medium illumination - a gray background, dark text (standard page display, in the absence of information about the illumination)
• in high light - white background, dark text
• in low light - dark background, light text

We will write the necessary JavaScript code:

window.addEventListener('devicelight', function(e) {
  var lux = e.value;
  if(lux < 50) {
    document.body.className = 'dark';
  }
  if(lux >= 50 && lux <= 300) {
    document.body.className = 'normal';
  }
  if(lux > 300)  {
    document.body.className = 'bright';
  } 
});

And the corresponding styles for the page:

body,
body.normal {
  background-color: #ddd;
  color: #111;
}
body.dark{
  background-color: #444;
  color: #fff;
}
body.bright {
  background-color: #fff;
  color: #333;
}

View DEMO


At the moment, alas, this feature is only supported in Firefox 22+, there should also be a light sensor on the device.
The page was tested in Firefox on Lenovo P780, Nexus 5, Nexus 7 devices. The

page behaves a little differently on these devices, apparently due to the different sensitivity of the sensors.

W3C promised to add lighting definitions to CSS Media Queries 4 through the luminosity parameter, i.e. the above example would have the following form:

@media screen and (luminosity: normal) {
  body {background-color: #ddd; color: #111;}
}
@media screen and (luminosity: dim) {
  body {background-color: #444; color: #fff;}
}
@media screen and (luminosity: washed) {
  body {background-color: #fff; color: #333;}
}

But at the moment the document is still at the draft stage. We will wait for the official announcement of support for this feature.

UPD : At the request of the user ange007 added a trackbar to the page, for convenient viewing of the example without a supported device. Also added a QR code for quick viewing on mobile devices.