Now you can switch between a "dark mode" and "normal mode" on a website based on the surrounding light! It can really help in curating a better use...
For further actions, you may consider blocking this person and/or reporting abuse
Woah!
🎉
Very nice!
I'll try making a POC where the website becomes progressively darker based off the
illuminancelevel, using css custom properties, if anyone is interested in joining me!If someone wants to out the snippet using a real website, Brawldb is dark by default, but light when the body has the
theme-lightclass.It is usually toggled via the top-right menu, but should also work via this snippet.
Definitely, go for it! :)
I also made a very simple demo web page sometime back. Check that out, if you wish, to see this code work instantly.
WHAT THE HECK that's amazing! I wonder how the browser detects the light???
It relies on the device having a sensor.
developer.mozilla.org/en-US/docs/W...
Ah, okay. For some reason I thought it was solely based on software.
Usually cellphones or some notebooks have hardware to detect light and auto-adjust brightness, so it can be used for this.
Yes, this is based on the sensors that are present on your device. The Sensors API exposes those device sensors on to the web platform.
It is based on the Sensors API.
Also, to use this sensor, browser needs permission from the user, that is done via the Permissions API.
I read a similar article last year which convinced me that Ambient Light Sensor API is very cool! Check it out!
Hello Ananya,
Great that you liked the ALS feature on Chrome. We are planning to ship ALS on Chrome by default sometime soon. It would be great to get more inputs
from creative webdev folks. Feel free to ask for more details :)
Riju,
(ALS/sensors -chrome+W3C)
If there is no sensor available then you might also just use the local time. Maybe not for a complete dark mode but for something like a night shift mode. The same way the OSs are doing it.
So stoked to see someone writing about this!
The web APIs are growing and I am so ready to see what people build with these!
Great work!
Thanks! Indeed, web APIs are growing and it's exciting!
How can i implement the same in angular ?
I tried but Its giving error.
This is just plain JavaScript so it should work. Can you elaborate what error it is?
Maybe it's something specific to angular and not related to this particular bit of code.
I am getting error like Property 'AmbientLightSensor' does not exist on type 'Window' & Cannot find name 'AmbientLightSensor'.
My Code:
if (window.AmbientLightSensor) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => console.log(sensor.illuminance);
sensor.onerror = event => console.log(event.error.name, event.error.message);
sensor.start();
}
You need to extend the existing
Windowinterface to tell it about this new property.So, before your
classimplementation add this code -Then you can add your
AmbientLightSensorcode in the following way -I hope this will solve your problem.
Now error is not coming but window.AmbientLightSensor is coming as undefined.
It’s mind-blowing. I never imaged such a thing is possible.
Furthermore such a small amount of code without asking permission. Love it.
Thank you so much for letting me know.
Amazing. 🤓
Implementing this right away! thanks for sharing
Very cool! Thanks for sharing :)
OMG thats crazy!!
This is pretty nifty! It'll be super cool once this is more available! :D
I called you at Codepen.io, but you seem not to read the notification. So I came to alert you that it does not work on Google Chrome on Android phone.