A polyfill for the light-level CSS @media feature.
This media feature can be used to adjust styles based on the ambient light level - however since it's from a relatively recent Working Draft, it currently has zero browser support.
Launch instructions
This demo will work with the following browsers:
-
Chrome: both desktop and Android. Please enable the chrome://flags/#enable-generic-sensor-extra-classes flag.
The demo on this site works with Chrome 63 or later. If you have an older version of Chrome, please also enable the chrome://flags/#enable-generic-sensor flag.
-
Firefox: both desktop and Android. Please enable the device.sensors.ambientLight.enabled flag in about:config
-
Edge: allegedly, but I have been unable to test it.
If your device is supported cover the light sensor with your hand or expose it to bright light in order to see the colours on this page change.
Plugins
To use light-level on your own projects, you can use the following plugins:
- PostCSS Light Levels to convert future CSS syntax to equivalent classnames.
- Light Levels JS Polyfill to append matching classes to the
<html>
element.