Skip to main content

Single line of style to bring (keypart of) f.lux on FirefoxOS

· 2 min read

Claim: this exercise is for experiment, not for product.

According to wikipedia, f.lux adjusts a computer display's color temperature according to its location and time of day. I always use it on my Mac to make my eyes more comfortable at night.

So, the topic is about if we can bring that experience on Firefox OS. Adjust display's color temperature generally is a system specific issue. But actually it can be categorized as an CSS trick if we like to make it on web (a gist to mimic the f.lux effect).

To quick experiment if it doable or not, the validation steps are:

1. open the WebIDE on Firefox Developer Edition 2. download and open emulator (I choose v2.2) on WebIDE. 3. To debug system app, choose System from top left selector in WebIDE. 4. once connected,  select the html tag and add style **filter: brightness(0.8) sepia(0.9);** into the element.

The live view changed to f.lux like color temperature.

So it works!

To make it persistent on real device, edit [gaia/apps/system/style/system/system.css](https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/system/system.css#L5), add above style into html tag. Run make reset-gaia then you have the style applied on device.

What's Next

The above experiment will change your device's color temperature permanently, which is not what f.lux do. To make it as option, you can add an option in settings > developer panel and add a observer in system to dynamically add such style into system html tag.

If you feel the strong desire to have such feature happen on Firefox OS device, fire a bug on bugzilla.