Gracias a HTML5 hoy disfrutamos de un gran contenido en cuanto a APIs para JavaScript, muchas de ellas muy útiles y curiosas; Con el fin de siempre aprender algo nuevo me he dado a la tarea de investigar algunas de ellas y una que me llamo bastante la atención es la API de luz ambiental ☀️ (Ambient Light API), la cual nos permite acceder al sensor de luz ambiental de un dispositivo 📱, ¡Así es!, ese puntito que esta en la parte de enfrente de tu teléfono.

Uno jamás se imagina en poder acceder a algo como esto usando JavaScript del lado del cliente (navegador), si no me crees puedes probar el siguiente demo.

Soporte: La API de luz ambiental solo es compatible con Edge y Firefox (Mac OS X y Android).

Evento devicelight

Para poder acceder a la luz ambiental de nuestro dispositivo, se usa el evento devicelight y gracias al objeto evento podemos acceder a la propiedad value la cual nos devuelve el nivel de luz ambiental en lux (unidad para medir el nivel de iluminación 💡).

Ejemplo:

// La letra (e) representa a nuestro objeto evento

window.addEventListener("devicelight", function(e){  
  console.log(e.value); // El nivel de luz se imprime cada vez que este cambia
  });

¿Increíble, no crees?, así de fácil es poder acceder a la luz ambiental, esto puede ser muy útil para cambiar los colores 🎨 de tu sitio web, dependiendo de dónde se encuentre tu usuario, es decir, poner colores oscuros cuando no haya mucha luz 🌕 y poner colores claros cuando haya luz solar ⛱.

¿Te gustaría hacerlo?, vamos a darle...

Adaptando un sitio web a la luz ambiental

Bien, para este ejercicio vamos a mostrar en pantalla el nivel de luz ambiental actual y cambiaremos el color de fondo, dependiendo el nivel de este.

HTML

<!-- Le damos un id al <body> y al <span> para acceder a estos con JS -->

<!-- la clase modo-normal es para los estilos por default que va a tener nuestro sitio web. -->  
<body id="body" class="modo-normal">  
  <span id="texto" class="texto">Tu navegador no soporta la API de luz ambiental</span> <!-- Nos aseguramos de que si el navegador no soporta la API, este vea algún mensaje y este enterado. -->
</body>  

JavaScript

// Empezamos creando una función que se encargue de cambiar los colores de fondo y muestre el nivel actual de la luz ambiental.

var cambiarColores = function(e) {  
  var $body = document.getElementById("body"), // Guardamos el <body> en la variable $body
        $texto = document.getElementById("texto"), // Guardamos nuestro <span> en la variable $texto
        $lux = e.value; // Guardamos el nivel de luz ambiental en la variable $lux

  $text.textContent = $lux + " lux"; // Imprimimos el valor de la luz ambiental dentro de nuestro <span>

  // Cuando el valor de la luz ambiental sea menor a 5, agregamos la clase modo-oscuro y removemos las otras clases, esto para evitar que estén todas juntas.

  if($lux < 5)  {
    $body.classList.add("modo-oscuro");
    $body.classList.remove("modo-normal", "modo-brillante");
  }

  // Cuando el valor de la luz ambiental sea mayor o igual a 5 y menor o igual a 1500, agregamos la clase modo-normal y removemos las otras clases.

  else if($lux >= 5 && $lux <= 1500) {
    $body.classList.add("modo-normal");
    $body.classList.remove("modo-oscuro", "modo-brillante");
  }

  // Cuando no se cumplan las otras condiciones, es decir, que el valor de la luz ambiental sea mayor a 1500, agregamos la clase modo-brillante y removemos las otras clases.

  else {
    $body.classList.add("modo-brillante");
    $body.classList.remove("modo-oscuro", "modo-normal");
  }
};

// Agregamos el evento devicelight y disparamos nuestra función cambiarColores.

window.addEventListener('devicelight', cambiarColores);  

CSS

Finalmente, agregamos las clases que definimos en el JS, dentro de nuestro CSS para que el sitio web cambie, dependiendo de la luz.

/* Aumentamos el tamaño de nuestro texto */
.texto{
  font-size: 2em;
}

/* Esta clase tiene un color de fondo completamente oscuro y el color de texto brillante */
.modo-oscuro {
  background-color: #333c41;
  color: #f3f3f3;
}

/* Esta clase tiene un color de fondo brillante y el color de texto oscuro */
.modo-normal {
  background-color: #f3f3f3;
  color: #333c41;
}

/* Esta clase tiene un color de fondo totalmente blanco y el color de texto negro */
.modo-brillante {
  background-color: #fff;
  color: #000;
}

Así es como un sitio web puede cambiar de estilos, dependiendo de la luz o lugar en donde se encuentre nuestro usuario 🏃.

Nosotros podemos hacer esto un poco más complejo, agregando más condiciones y cambios dependiendo el nivel de luz.

  • 0,00005 lux: Luz de una estrella (Vista desde la tierra).
  • 0,0001 lux: Cielo nocturno nublado, luna nueva.
  • 0,001 lux: Cielo nocturno despejado, luna nueva.
  • 0,01 lux: Cielo nocturno despejado, cuarto creciente o menguante.
  • 0,25 lux: Luna llena en una noche despejada.
  • 1 lux: Luna llena a gran altitud en latitudes tropicales.
  • 3 lux: Límite oscuro del crepúsculo bajo un cielo despejado.
  • 100 lux: Pasillo en una zona de paso.
  • 300 lux: Sala de reuniones.
  • 500 lux: Oficina bien iluminada.
  • 600 lux: Salida o puesta de sol en un día despejado.
  • 1000 lux: Iluminación habitual en un estudio de televisión.
  • 32,000 lux: Luz solar en un día medio (mín.).
  • 100, 000 lux: Luz solar en un día medio (máx.).

Fuente: Wikipedia 🌏

Sin duda una API muy interesante que le puede agregar un gran toque a nuestro sitio web 🖥 , dando una mejor experiencia a los usuarios.

Todo el código usado en el ejemplo lo puedes ver en mi Github. 🐙 🐈

Tip: Puedes ahorrar batería en un dispositivo con pantalla AMOLED (OLED), usando colores negros, ya que estos no producen ninguna luz, en pocas palabras los píxeles dejan de emitir luz.