💡 Natively detect changes in ambient light.

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・1 min read

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');

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.

Posted on by:

iainfreestone profile

Iain Freestone


A Web developer from Hampshire in the south of England.


markdown guide