💡 Natively detect changes in ambient light.

#javascript #html #webdev

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!

<!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.