An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- Slashdot
- Just Creative
- Fuel Your Creativity
- Naldz Graphics
- CSS Globe
- Specky Boy
- Spyre Studios
- Freelance Switch
- Android Dissected
- TechPowerUp
Help Webnuz
Referal links:
June 8, 2020 09:19 pm GMT
Original Link: https://dev.to/iainfreestone/natively-detect-changes-in-ambient-light-4gg7
Natively detect changes in ambient light.
Use ambient light events to modify how your site works depending on light intensity.
This could be used to switch to a night mode interface or mute all the sounds when in a dark environment.
Lights off, Lights on!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ambient Light Events</title> <style> * { margin: 0px; } #bulb { width: 100%; height: 100vh; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } .on { background-color: white; background-image: url("lightsOn.png"); } .off { background-color: black; background-image: url("lightsOff.png"); } </style></head><body> <div id="bulb" class="on"/> <script> var bulb = document.getElementById('bulb'); if ('ondevicelight' in window) { window.addEventListener('devicelight', function(event) { var bulb = document.getElementById('bulb'); if (event.value < 50) { bulb.classList.add('off'); bulb.classList.remove('on'); } else { bulb.classList.add('on'); bulb.classList.remove('off'); } }); } else { console.log('devicelight event not supported'); } </script></body></html>As of June 2020 this feature is only available behind a feature flag on Firefox. It can be activated by navigating to "about:config" and toggling the device.sensors.ambientLight.enabled flag to true.
Ambient Light Events - MDN Docs
If you enjoyed this little snippet you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Original Link: https://dev.to/iainfreestone/natively-detect-changes-in-ambient-light-4gg7
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To