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">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ambient Light Events</title>
      * {
        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");
    <div id="bulb" class="on" />
      var bulb = document.getElementById("bulb")
      if ("ondevicelight" in window) {
        window.addEventListener("devicelight", function (event) {
          var bulb = document.getElementById("bulb")
          if (event.value < 50) {
          } else {
      } else {
        console.log("devicelight event not supported")

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