Page color scheme based on actual ambient lighting

Note that this feature is currently supported only on Firefox for Android and FirefoxOS browser.

CLICK HERE TO SEE THE DEMO

Implementation is as simple as listening to devicelight event and pulling its value from e.value:

window.addEventListener('devicelight', function(e){
  var currentLux = e.value;
  console.log(currentLux);
})

Possible use cases?

1. Changing page color scheme for users who read a lot in bed (as I do) :)
2. Barry White
3. Of course, almost all tablets and many smartphones dim their screens in dark environment, but usually it does not help much since you're staring at a white glowing rectangle anyway. Take Feedly Mobile light and dark color schemes for an example.

Resources

• https://hacks.mozilla.org/2013/04/ambient-light-events-and-javascript-detection/
• W3C Working Draft
• MDN

PS

The solution I've provided is just a proof of concept and could be easily improved, for instance: by using multiple color schemes or adjusting transition duration.