Iain Freestone

💡 Natively detect changes in ambient light.

June 08, 2020

Use ambient light events to modify how your site works depending on light intensity.

This could be used to switch to a night mode interface or mute all the sounds when in a dark environment.

Lights off, Lights on!

Demo Site

Light Event Video


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ambient Light Events</title>
    <style>
      * {
        margin: 0px;
      }
      #bulb {
        width: 100%;
        height: 100vh;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
      }
      .on {
        background-color: white;
        background-image: url("lightsOn.png");
      }
      .off {
        background-color: black;
        background-image: url("lightsOff.png");
      }
    </style>
  </head>
  <body>
    <div id="bulb" class="on" />
    <script>
      var bulb = document.getElementById("bulb")
      if ("ondevicelight" in window) {
        window.addEventListener("devicelight", function (event) {
          var bulb = document.getElementById("bulb")
          if (event.value < 50) {
            bulb.classList.add("off")
            bulb.classList.remove("on")
          } else {
            bulb.classList.add("on")
            bulb.classList.remove("off")
          }
        })
      } else {
        console.log("devicelight event not supported")
      }
    </script>
  </body>
</html>

As of June 2020 this feature is only available behind a feature flag on Firefox. It can be activated by navigating to “about:config” and toggling the device.sensors.ambientLight.enabled flag to true.

Light Event Video

Ambient Light Events - MDN Docs