This browser doesn't support the Ambient Light Events API. Read more.

Ambient Light Events Demo

This demo page uses the Ambient Light Events API to adjust the background and text color depending on ambient light levels.

At time of writing this demo only Firefox had support for this feature.

CSS

body {
  background: #fff;
  color: #333;
  transition: all 200ms linear;
  ...
}

body.dark {
  background: #333;
  color: #fff;
}

JavaScript

(function () {
  "use strict";

  window.addEventListener('devicelight', function (e) {
    var lux = e.value;

    if (lux < 2) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  });

})();