Search code examples
cssreactjsnight-shift

Night shift with css similiar to f.lux


Is it possible to create something something similar to f.lux to my website?

f.lux simulates a night shift - I would like to make my Web-App behave the same way.

So for example css property that shifts all colors to some temperature.

Right now I'm using react on the client side. Perhaps there is some plugin :) ? Thanks and best regards!


Solution

  • To extend on Sean's answer, you can also use background-color to achieve a somewhat similar effect. Also note that you would need to use pointer-events: none so that the orange layer doesn't prevent clicks/taps.

    html:before {
      position: fixed;
      width: 100%; height: 100%;
      background-color: #ffa339;
      opacity: .1;
      pointer-events: none;
      content: ' ';
      z-index: 99999;
    }
    <button>flux up!</button>

    Disclaimer: There's probably more science behind flux/nightshift/etc., so take this with a grain of salt. Offering a dark theme might be an even better solution that helps using your site at night.