A few days ago I ran into this article by Tomomi Imura about ambient light level detection and use by the websites. Immediately intrigued by the possibilities this opens up I started digging a bit further and think of how I could use it in my upcoming redesign. (Looking something up in the middle of the night half a sleep, on a site with a full white background is a near instant headache for example.) There was one thing missing, correct me if I'm wrong, a simple way to test it on your device (if supported). Hence this post.

Don't get me wrong Tomomi did a great job making the video and putting the code up on codepen.io. But what I was really looking for was this a simple page to browse to. And the codepen page is fine on desktop but a PITA on a smartphone.

The 2 labels below show the results from the devicelight and lightlevel events of your device, sidenote nothing happens until the value changes:

devicelight: Not supported on your device
lightlevel: Not supported on your device

Only was able to get results using Firefox. Detected with the following code:

    window.addEventListener('devicelight', function(event) {
        document.querySelector('#devicelight_value').textContent = event.value + ' lux';
        document.querySelector('#devicelight_value').style.color = 'green';
    });

    window.addEventListener('lightlevel', function(event) {
        document.querySelector('#devicelightlevel_value').textContent = event.value;
        document.querySelector('#devicelightlevel_value').style.color = 'green';
    });

For a more detailed post on the subject check Tomomi's post: Responsive UI with Luminosity Level!