Responsive Design with Luminosity Level Demo from Tomomi Imura on Vimeo.
Adjusting the background and text colors depending on the luminosity level.
Watch me turn the room light on and off, and see what happens to the UI.
This is supposed to be a demo for CSS Level4 Luminosity (dev.w3.org/csswg/mediaqueries4/#luminosity), however, this is not yet implemented on any browsers (as of Nov 2013), so I emulated it with DOM Ambient Light event (w3.org/TR/ambient-light/), which has been supported by Firefox 15+.
The device used on the demo is Nexus 7 (Android), and the browser is Firefox.
It works on ZTE Open (FirefoxOS), however, failed on Keon (FirefoxOS) but it didn’t work. Maybe because Keon lack a light sensor.
You can view the source code at: codepen.io/girliemac/pen/pvmBs