Esquema de cores da página com base na iluminação ambiente real

Observe que esse recurso é atualmente compatível apenas com o Firefox para Android e navegador FirefoxOS .

CLIQUE AQUI PARA VER A DEMONSTRAÇÃO

A implementação é tão simples quanto ouvir o devicelightevento e extrair seu valor de e.value:

window.addEventListener('devicelight', function(e){
  var currentLux = e.value;
  console.log(currentLux);
})

Casos de uso possíveis?

1. Alterar o esquema de cores da página para usuários que leem muito na cama (como eu) 🙂
2. Barry White
3. Claro, quase todos os tablets e muitos smartphones escurecem suas telas em ambientes escuros, mas geralmente não ajuda muito, já que você está olhando para um retângulo branco brilhante de qualquer maneira. Veja os esquemas de cores claras e escuras do Feedly Mobile como exemplo.

Recursos

• https://hacks.mozilla.org/2013/04/ambient-light-events-and-javascript-detection/
• Rascunho de Trabalho W3C
• MDN

PS

A solução que forneci é apenas uma prova de conceito e pode ser facilmente aprimorada, por exemplo: usando vários esquemas de cores ou ajustando a duração da transição.