A especificação Ambient Light Events do W3C define dois novos eventos capazes de detectar mudanças na intensidade da luz ambiente, permitindo que páginas da web e aplicativos reajam a essas mudanças, como alterando o contraste de cores ou a exposição de fotos. Estes eventos notificam quando o sensor de luz detecta uma mudança e fornecem a intensidade da luz em lux, permitindo ao navegador reagir às condições de iluminação.

1. Ambient Light Events
Wylkon Cardoso

2. A W3C sempre nos surpreende com suas novas especificações e
uma delas define dois novos eventos capazes de detectar
mudanças de luz no ambiente.
Ambient Light Events
Antes eles faziam parte da Sensors API, mas foram
desmembrados em uma especificação independente de menor
escopo.

3. Conheça outros sensores que já podem ser controlados via Web
através da documentação do W3C:
http://www.w3.org/2009/dap/
Ficou curioso né? Veja esse exemplo divertido abaixo:
http://goo.gl/0FVzqT

4. Com esses eventos conseguimos de maneira prática fazer uma
página web ou um aplicativo reconhecer qualquer mudança na
intensidade da luz.
E isso nos permite reagir a essas mudanças, por exemplo,
alterando o contraste de cores da interface do usuário (UI) ou
alterando a exposição necessária para tirar uma foto.

6. Quando o sensor de luz de um dispositivo detecta uma mudança no
nível de luz, ele notifica o navegador dessa mudança, logo o navegador
dispara um evento DeviceLightEvent que fornece informações sobre
a intensidade da luz exata do ambiente.
Este evento pode ser capturado no objeto window usando o método
addEventListener (passando o nome do evento devicelight) ou
com window.ondevicelight.
Então você pode acessar a intensidade da luz expressa em “lux” através
da propriedade DeviceLightEvent.value.

7. window.addEventListener('devicelight', function(event) {
var html = document.getElementsByTagName('html')[0];
if (event.value < 50) {
html.classList.add('darklight');
html.classList.remove('brightlight');
} else {
html.classList.add('brightlight');
html.classList.remove('darklight');
}
});

8. O que está por vir?
@media (light-level: normal) {
p { background: url("texture.jpg"); color: #333 }
}
@media (light-level: dim) {
p { background: #222; color: #ccc }
}
@media (light-level: washed) {
p { background: white; color: black}
}

9. Obrigado :D
http://wylkon.github.io/