DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at

💡 Natively detect changes in ambient light.

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

Alt Text

<!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');
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Ambient Light Events - MDN Docs

If you enjoyed this little snippet you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Top comments (1)

ben profile image
Ben Halpern