Eventos de Luz Ambiental con JavaScript para detectar niveles de luz - DeviceLight y AmbientLightSensor

Detectar la luz ambiental en JavaScript usando el sensor del dispositivo es una de esas funcionalidades poco conocidas que, cuando las descubres, te hacen replantear cómo personalizar la experiencia de usuario en una aplicación web. Gracias a esta tecnología, podemos adaptar interfaces, cambiar estilos visuales o decidir qué contenido mostrar según la iluminación real del entorno del usuario.

Podemos detectar el nivel de luz ambiental obtenida por el sensor de luz del dispositivo entiéndase un teléfono inteligente o Tablet con JavaScript; de esta forma es posible configurar las aplicaciones según el nivel de luz presente en el ambiente; por ejemplo, es posible agregar un modo nocturno o un modo diurno según el nivel de luz presente en el ambiente; estos niveles están medidos en Lux como puedes consultar en la documentación oficial.

Aunque no es una API ampliamente soportada, sigue siendo un recurso interesante para entender hasta dónde puede llegar JavaScript cuando se apoya en los sensores del dispositivo, acercándose cada vez más a funcionalidades propias de aplicaciones nativas.

Anteriormente vimos como emplear los Web Workers en JavaScript.

¿Qué es el sensor de luz ambiental y para qué sirve?

El sensor de luz ambiental es un componente físico presente en muchos dispositivos móviles y tablets que mide la intensidad de la luz del entorno. Esta medición se expresa en lux, una unidad estándar para cuantificar la iluminación.

En JavaScript, este sensor permite:

• Detectar si el entorno es oscuro o muy luminoso
• Ajustar automáticamente la interfaz de usuario
• Activar modos nocturnos o diurnos
• Mejorar la legibilidad y el confort visual

Aunque a primera vista parece una tecnología con poco uso práctico, cuando empiezas a pensar en aplicaciones reales —como contenidos visuales, multimedia o interfaces con muchos colores claros— el potencial es evidente.

Devicelight es es una tecnología poco conocidas en JavaScript que pareciera no tiene uso aparente; aunque por otra parte son de estas tecnologías que poco a poco van absorbiendo características que están presentes en una app nativo como en Android o IOS con tecnologías; recuerda que todo tiene utilidad, y le podemos sacar partido a esta sutil tecnología fácilmente.

Por ejemplo, si queremos presentar un recurso visual o audiovisual y este tiene muchos colores claros, si hay un ambiente con poca luz, que la podemos obtener con esta tecnología entonces podemos decidir si enviamos un recurso u otro recurso dependiendo de la cantidad de luz.

Las posibilidades de configuración y personalización que puede tener una aplicación web según el nivel de luz ambiental presente son las mismas ofrecidas por la infinidad de opciones que tenemos con JavaScript; el único límite es nuestra imaginación.

Podemos resumirlo en español como: "La unidad lux devuelta oscila entre valores bajos y altos; los valores oscuros son menores de 30 lux mientras que los muy brillantes son 10.000 y superiores."

Evento de la API de DeviceLightEvent para detectar variaciones de luz

Tenemos que aplicar un evento llamado DeviceLightEvent; este evento es desencadenado cuando el navegador detecta variaciones en el nivel de la luz.

Para detectar la luz ambiental en JavaScript se utiliza el evento devicelight, perteneciente a la API de sensores.

Este evento se dispara automáticamente cuando el navegador detecta un cambio en la intensidad de la luz captada por el sensor del dispositivo.

Funcionamiento básico

• El navegador accede al sensor de luz ambiental
• Se dispara el evento devicelight
• El evento devuelve un valor numérico que representa la intensidad lumínica
• Podemos reaccionar a ese valor con lógica JavaScript

Desde el evento podemos consultar un valor medido en Lux el cual es el que nos interesa verificar para detectar variaciones o el nivel de lux actual:

Lux "Unidad de medida para la iluminación según una función de luminosidad"

Ejemplo básico:

window.addEventListener("devicelight", function (event) {
    var lux = event.value;    //*** hacemos algo
});

De cualquier forma, vale la pena probar y conocer esta tecnología con tantas posibilidades que nos puede ofrecer y su sencillez de emplear; veamos un pequeño ejemplo que recuerda debes de probar en una versión de Firefox móvil actualizado:

window.addEventListener("devicelight", function(event) {
    var lux = event.value;

    // lux <= 30 es un ambiente oscuro o con poca luz
    if (lux <= 30) 
        document.getElementById('pagestyle').setAttribute('href', 'modonocturno.css');
     else 
        document.getElementById('pagestyle').setAttribute('href', 'mododiurno.css');

    document.getElementById("lux").innerHTML = lux + " lux";

});

Qué son los lux y cómo interpretar los valores de luz

El valor que devuelve el sensor de luz ambiental se mide en lux, que es la unidad estándar para la iluminación.

Según la Fundación Mozilla:

Los valores bajos de lux indican entornos oscuros, mientras que valores altos representan entornos muy iluminados. Como referencia, menos de 30 lux es un ambiente tenue, y más de 10.000 lux corresponde a una iluminación muy intensa.

La Fundación Mozilla dice: "It comes returned in the lux unity. The lux value ranges between low and high values, but a good point of reference is that dim values are under 30 lux, whereas really bright ones are 10,000 and over."

En términos prácticos:

• ≤ 30 lux → Ambiente oscuro
• 30 – 1.000 lux → Iluminación normal
• > 10.000 lux → Luz muy intensa (exterior)

Cuando probé esta API, uno de los puntos clave fue entender bien estos rangos para no aplicar cambios bruscos en la interfaz y lograr una transición visual natural.

Ejemplo de la API de DeviceLightEvent para variar el CSS según el nivel de luminosidad

Un ejemplo muy puntual que presenta uno de los múltiples usos que puede tener esta API; el experimento anterior consiste en cambiar los colores claros de la interfaz al detectar poca luminosidad (ambiente oscuro) en el ambiente a través de la carga de un CSS distinto que se activa/desactiva al detectar ciertos valores en la luminosidad de la luz.

window.addEventListener("devicelight", function(event) {
   var lux = event.value;
   document.getElementById("lux").innerHTML = lux + " lux";
});

Tenemos un tag link con id=pagestyle en donde referenciamos una pequeña hoja de estilo, ahora bien:

Click aquí para ver el ejemplo; recomiendo probar el ejemplo en un dispositivo con Firefox OS o en Firefox para Android.

• Cuando la unidad de lux devuelta var lux = event.value; sea menor o igual a 30, es un entorno oscuro y por lo tanto reemplazamos la hoja de estilo por defecto llamada mododiurno.css por modonocturno.css.
• Caso contrario (la unidad de lux devuelta es mayor a 30) reemplazamos modonocturno.css por mododiurno.css.

Este pequeño fragmento ya nos permite:

• Leer el valor del sensor
• Visualizarlo en tiempo real
• Usarlo como base para lógica condicional

A partir de aquí, las posibilidades crecen rápidamente.

Click aquí para ver el ejemplo; recomiendo probar el ejemplo en un dispositivo con Firefox OS o en Firefox para Android.

Cambiar el CSS según la luz ambiental (modo oscuro y claro)

Uno de los usos más comunes del sensor de luz ambiental es activar un modo oscuro o claro automáticamente.

Este enfoque me parece especialmente útil cuando trabajas con interfaces cargadas de elementos visuales, ya que puedes decidir qué recursos mostrar según la iluminación del entorno.

Ejemplo: cambiar hojas de estilo dinámicamente

window.addEventListener("devicelight", function(event) {
   var lux = event.value;
   if (lux <= 30) {
       // Ambiente oscuro
       document.getElementById('pagestyle')
           .setAttribute('href', 'modonocturno.css');
   } else {
       // Ambiente luminoso
       document.getElementById('pagestyle')
           .setAttribute('href', 'mododiurno.css');
   }
});

En este caso:

• Si el entorno es oscuro, cargamos un CSS con colores suaves
• Si hay buena iluminación, usamos una hoja de estilos clara

Este patrón es simple, efectivo y demuestra muy bien el valor real de detectar la luz ambiental con JavaScript.

Casos de uso reales del sensor de luz ambiental

Aunque no sea una tecnología masiva, existen escenarios donde tiene mucho sentido:

• Adaptación de contenido visual
  • Si una aplicación muestra imágenes o vídeos con muchos colores claros, puedes decidir mostrar versiones alternativas cuando hay poca luz ambiental.
• Interfaces más cómodas
  • Activar automáticamente un modo nocturno mejora la experiencia del usuario sin que tenga que hacer nada manualmente.
• Aplicaciones educativas o experimentales
  • Este tipo de APIs es ideal para proyectos que exploran sensores y comportamiento del entorno.
  • Como he comprobado personalmente, el verdadero límite de esta tecnología no es JavaScript, sino la creatividad con la que decidas usarla.

Compatibilidad y limitaciones del sensor de luz en navegadores

Al momento de escribir y actualizar este contenido:

• DeviceLightEvent es una tecnología obsoleta (deprecated) que está siendo eliminada de los navegadores, ha sido abandonada por casi todos los navegadores principales debido a preocupaciones de privacidad (específicamente por el riesgo de fingerprinting y ataques de canal lateral para espiar al usuario).
• No está soportada por la mayoría de navegadores modernos

Por este motivo:

• No es recomendable para proyectos críticos en producción
• Sí es muy interesante para pruebas, aprendizaje y experimentación

Aun así, conocer esta API te da una visión más amplia de lo que JavaScript puede hacer cuando se integra con hardware real.

¿Vale la pena usar el sensor de luz ambiental hoy?

Desde mi punto de vista, sí vale la pena conocerlo, aunque no sea una tecnología de uso masivo.

No todas las APIs están pensadas para resolver problemas inmediatos; muchas sirven para:

• Aprender
• Experimentar
• Anticiparse a funcionalidades futuras

El sensor de luz ambiental es un buen ejemplo de cómo JavaScript va absorbiendo características propias de aplicaciones nativas, y cómo una web puede reaccionar al entorno físico del usuario.

Preguntas frecuentes (FAQs)

• ¿Qué evento se usa para detectar la luz ambiental en JavaScript?
  • Se utiliza el evento devicelight, que se dispara cuando cambia la intensidad de la luz captada por el sensor del dispositivo.
• ¿En qué unidad se mide la luz ambiental?
  • La luz se mide en lux, una unidad estándar para cuantificar la iluminación.
• ¿Funciona en todos los navegadores?
  • No. El soporte es limitado y ha sido principalmente implementado en Firefox, sobre todo en dispositivos móviles.
• ¿Se puede usar para activar modo oscuro?
  • Sí, es uno de los usos más comunes: cambiar estilos o CSS según el nivel de luz ambiental.

AmbientLightSensor

El Ambient Light Sensor API (Sensor de Luz Ambiental) es una interfaz más moderna que permite a las aplicaciones web acceder a los datos del sensor de luz de un dispositivo (como el sensor que ajusta el brillo automático en un móvil o laptop).

A diferencia de la antigua y obsoleta DeviceLightEvent que fue la que vimos antes, es una API que forma parte de la Generic Sensor API, lo que significa que es mucho más robusta, segura y eficiente en términos de rendimiento.

Aquí tienes ejemplo:

if ('AmbientLightSensor' in window) {
 try {
   // Crear el sensor
   const sensor = new AmbientLightSensor();
   // Se ejecuta cada vez que cambia el nivel de luz
   sensor.addEventListener('reading', () => {
     const lux = sensor.illuminance;
     console.log(`Luz ambiental: ${lux} lux`);
     if (lux < 30) {
       document.body.classList.add('dark-mode');
       document.body.classList.remove('light-mode');
     } else {
       document.body.classList.add('light-mode');
       document.body.classList.remove('dark-mode');
     }
   });
   // Manejo de errores
   sensor.addEventListener('error', event => {
     console.error('Error del sensor:', event.error.name);
   });
   // Iniciar el sensor
   sensor.start();
 } catch (error) {
   console.error('No se pudo iniciar el sensor:', error);
 }
} else {
 console.warn('AmbientLightSensor no está soportado en este navegador');
}

CSS:

.dark-mode {
 background-color: #121212;
 color: #e0e0e0;
}
.light-mode {
 background-color: #ffffff;
 color: #222222;
}

Puntos importantes a tener en cuenta

• Unidad: sensor.illuminance devuelve el valor en lux
• Permisos:
  • Funciona solo en contextos seguros (HTTPS)
  • Algunos navegadores requieren permisos explícitos
• Compatibilidad:
  • Soporte limitado (principalmente Chrome/Edge en Android)
  • No funciona en la mayoría de navegadores de escritorio
• Estado: API experimental (Web Sensors API)

Conclusión

Detectar la luz ambiental en JavaScript con el sensor del dispositivo es una funcionalidad sencilla, potente y llena de posibilidades. Aunque su compatibilidad es limitada, ofrece una forma clara de adaptar interfaces web al entorno real del usuario, mejorando la experiencia y abriendo la puerta a aplicaciones más inteligentes y contextuales.

Si alguna vez necesitas que tu web reaccione a algo tan real como la luz que rodea al usuario, esta API merece, como mínimo, una prueba.

Ahora, vamos a hablar sobre el uso del localStorage en JavaScript.