We can detect the level of ambient light obtained by the light sensor of the device, meaning a smartphone or tablet with JavaScript; In this way it is possible to configure the applications according to the level of light present in the environment; For example, it is possible to add a night mode or a day mode depending on the level of light present in the environment; these levels are measured in Lux as you can see in the official documentation.
This is a little-known technology in JavaScript that seems to have no apparent use; although on the other hand they are one of these technologies that little by little are absorbing features that are present in a native app such as Android or IOS with technologies; Remember that everything is useful, and we can easily take advantage of this subtle technology.
For example, if we want to present a visual or audiovisual resource and it has many light colors, if there is an environment with little light, which we can obtain with this technology, then we can decide whether to send one resource or another resource depending on the amount of light.
The configuration and customization possibilities that a web application can have depending on the level of ambient light present are the same ones offered by the infinite options that we have with JavaScript; the only limit is our imagination.
The Mozilla Foundation says: "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."
We can summarize it in Spanish as: "The lux unit returned oscillates between low and high values; dark values are less than 30 lux while very bright values are 10,000 and higher."
DeviceLightEvent API event to detect light variations
We have to apply an event called DeviceLightEvent; This event is triggered when the browser detects variations in the light level.
From the event we can consult a value measured in Lux which is the one we are interested in verifying to detect variations or the current lux level:
Lux "Unit of measurement for lighting according to a function of luminosity"
window.addEventListener("devicelight", function (event) {
var lux = event.value; //*** to do
});As of the date this article was written and updated, this technology is still a Candidate Recommendation in the W3C, therefore it is not supported by many browsers; According to Mozilla, its browser is the only one that supports this technology starting with version 22 of said desktop web browser and for version 15 of Firefox Mobile (Android and Firefox OS) in addition to Microsoft Edge.
In any case, it is worth trying and getting to know this technology with so many possibilities it can offer us and its simplicity of use; let's look at a small example that remembers you should try in an updated version of Firefox mobile:
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";
});DeviceLightEvent API example to vary CSS based on brightness level
A very specific example that presents one of the multiple uses that this API can have; the previous experiment consists of changing the light colors of the interface when detecting low luminosity (dark environment) in the environment by loading a different CSS that is activated/deactivated when detecting certain values in the brightness of the light.
We have a link tag with id=pagestyle where we reference a small style sheet, now:
Click here to see the example; I recommend trying the example on a device with Firefox OS or Firefox for Android.
- When the lux unit returned var lux = event.value; is less than or equal to 30, it is a dark environment and therefore we replace the default style sheet called daymode.css with nightmode.css.
- Otherwise (the lux unit returned is greater than 30) we replace nightmode.css with daymode.css.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter