How to dim the blue light on a website?

Question

I am developing a website, and would like to dim the blue light (as night mode), however, I have not found a way to do this.

Is there any means by CSS, JS or some other language?

Answer 1

An extremely simple and at the same time objective way is to create an element that covers the viewport whole with opacity and blend-mode multiply. The multiplydoes exactly what we want, which is to multiply the colors R G B arbitrarily (in this case, attenuating the B specifically):

mix-blend-mode: multiply;

And here we define that the color "cut" will be blue (it would be the case to cut some of the green too):

background-color: rgba(255, 255, 0, 0.2);
                        ^    ^   ^   ^
                        |    |   |   |
                        |    |   |   Opacidade (0.2 = 20%)
                        |    |   B = 0, 0% de azul (será controlado pela opacidade)
                        |   G = 255, 100% de verde
                        R = 255, 100% de vermelho

We could have used something simpler like background-color:#ffffee, being ee the intensity of the blue, but this would give problem in the case of blend-mode failed in older browsers. Opacity (rgba) was chosen only for the sake of fallback. In an "ideal" world #ffff?? would suffice.

Finally, we need to make sure our filter doesn’t get in the way of the user:

pointer-events: none;

This causes our filter to stay on the page, but does not affect the mouse pointer, ringtones etc

Demonstration:

#menosazul {
  position: fixed; top:0; left:0; z-index:9999;
  height:100vh; width:100vw;
  pointer-events: none;
  background-color: rgba(255,255,0,0.2); /* o 0.2 é a opacidade */
  mix-blend-mode: multiply;
}

<img src="//i.stack.imgur.com/ZU2cj.jpg" style="float:right;width:30vw;height:auto">
<p>
   Aqui é o conteúdo, seria sua página "normal".<br>
   Exagerei no 0.2 para que fique evidente o "pseudo-filtro", regule como desejado<br>
   <br>
   O pointer-events permite que o <button>botão</button>
   funcione sob o filtro<br>
</p>

<div id="menosazul"><!-- Aqui é o nosso "filtro" --></div>

in the case of an old browser and blend mode fail, the dark colors are slightly affected, but this is only a serious problem if the filter is too exaggerated. Note that anyway, the site still remains usable.

Circadian rhythm

By way of curiosity, the motivation for the reduction of blue light is related to the Circadian Rhythm (circa dia, around one day), which is the "biological clock" of almost all living things.

One of the main components that regulates organisms is precisely light, especially its chromatic "temperature". More reddish/orange (warm) colors are more suitable for dusk and dusk, while more "bluish" colors (cold, and not restricted to blue specifically) are suitable for the morning period.

More details here:

https://en.wikipedia.org/wiki/Circadian_rhythm

Final note

I think if the concern is really with blue, it would be better simply to designer of the site reduce the blue components of the elements in the creation of the original CSS, completely dispensing with the need for any extra element.

You could even change this CSS or dynamically update according to the client’s PC time (and hope the clock is correct). The filter really could be left only for situations where conventional CSS is not feasible.

Answer 2

With a little CSS and Javascript with jQuery I did what follows. Click the blue button Execute down below to test and see the buttons Turn on the light and Turn off the light that arise.

$("#apagar").click(function() {
    $("body").addClass("light-off");
});

$("#acender").click(function() {
    $("body").removeClass("light-off");
});

body:not(.light-off) {
    background-color: white;
    color: black;
}

body.light-off {
    background-color: black;
    color: rgb(128, 128, 255);
}

#acender {
    background-color: yellow;
    color: black;
}

#apagar {
    background-color: rgb(128, 128, 255);
    color: white;
}

body:not(.light-off) #acender {
    display: none;
}

body.light-off #apagar {
    display: none;
}

#acender, #apagar {
    border: none;
    padding: 12px;
    border-style: none;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetuer adispiscing elit volupat.</p>
<button id="acender">Acender a luz</button>
<button id="apagar">Apagar a luz</button>

Answer 3

The blue light mentioned in the question is a light emitted by the viewers of tablets, mobile phones and monitors, and even disturbs because it is able to scare away sleep (you know when you are dying of sleep and take the phone and the sleep comes out? The blue light is to blame!).

Today companies are increasingly concerned with the vision of their users and are beginning to invest in the fight against blue light. (In the new update of windows 10 there is a function that can reduce blue light).

I believe that in the near future programming languages will also begin to adapt to this reduction.

Okay, no more mumbo jumbo:

Blue light can be reduced with the display of warmer colors for the user, so it is possible to avoid eye fatigue leaving it in a more comfortable environment. (Of course, this decrease is not necessary all the time, so companies like to call this practice night mode, once the user is tired at the end of the day and can use this function to help him sleep for example).

YET there is no form that is actually intended for blue light dimming in WEB practices. However thinking of a suitable alternative came the CSS3 filter options

The Filters are a strong tool capable of manipulating the entire coloring of an element on the page.

Thinking about it I will use the filter: sepia Which naturally has visibly warmer colors and may be able to reduce the blue light emitted by the device.

Behold:

$("#cinquenta").click(function() {
    $("body").removeClass("sepia100");
    $("body").addClass("sepia50");
});

$("#cem").click(function() {
    $("body").removeClass("sepia50");
    $("body").addClass("sepia100");
});

$("#zero").click(function() {
    $("body").removeClass("sepia50");
    $("body").removeClass("sepia100");
});

body.sepia50{
    filter: sepia(50%);
}

body.sepia100{
    filter: sepia(100%);
}

.jiu {
    background-color: rgb(128, 128, 255);
    color: white;
    border: none;
    padding: 12px;
    border-style: none;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Reduzir Luz Azul</h1>
<p>Você pode escolher a porcentagem de 0 a 100% de sepia.</p>
<button id="cem" class='jiu'>Sepia 100%</button>
<button id="cinquenta" class='jiu'>Sepia 50%</button>
<button id="zero" class='jiu'>Sepia 0%</button>

<br><br>
<img src='http://www.aprenderexcel.com.br//imagens/noticia/385/2901-1.jpg'>

It is not even necessary to say that if you do not know how to use this filter passively, your whole page will become a big piece of useless right? (the button sepia 100% is proof of this).

Remembering that this is not a specific practice to remove blue light. However the filter sepia naturally will convert the colors of the page to warmer colors and this can already be a proper start of reducing blue light.

Answer 4

After reading the other answers, I decided to implement my filter as well. It removes 1/4 of the blue component of all colors.

I took advantage and created another also, which darkens all color components in 3/4.

https://codepen.io/dudaskank/pen/NazoqQ

$("#apply-filter").click(function() {
  $("body").removeClass("other-filter");
  $("body").addClass("blue-filter");
});
$("#remove-filter").click(function() {
  $("body").removeClass("blue-filter other-filter");
});
$("#other-filter").click(function() {
  $("body").removeClass("blue-filter");
  $("body").addClass("other-filter");
});

body.blue-filter:before {
  pointer-events: none;
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(255, 255, 191);
  mix-blend-mode: multiply;
}

body.other-filter:before {
  pointer-events: none;
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(64, 64, 64);
  mix-blend-mode: multiply;
}

#quadrado-azul {
  width: 400px;
  height: 400px;
  display: inline-block;
  background: blue;
  color: white;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1>Blue Light Filter</h1>
  <p>Blue light filter test</p>
  <p><button class="btn btn-outline-dark " id="apply-filter">Blue Filter</button>
    <button class="btn btn-outline-dark " id="remove-filter">No Filter</button>
    <button class="btn btn-outline-dark " id="other-filter">Other Filter</button>
  </p>
  <div id="quadrado-azul">Sample Blue Square</div>
</div>

Answer 5

Good morning!

I’ve been poking around and I think I have something more or less in the line you’re saying, if I understand what you mean by "dim the blue light". See if that’s more or less what you want. I used the mix-blend-mode to overlay the screen with a filter decreasing all blue tones. Click the buttons at the beginning of the example.

$("#apagar").click(function() {
  $("body").toggleClass("filter");
});

$("#acender").click(function() {
  $("body").removeClass("filter");
});

body {
  background: rgba(255, 255, 255, 1);
  -o-transition: 0.2s all ease-in-out;
  -moz-transition: 0.2s all ease-in-out;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

img {
  width: 500px;
  height: auto;
}

#screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  -o-transition: 0.2s all ease-in-out;
  -moz-transition: 0.2s all ease-in-out;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

body.filter {
  background: rgba(0, 0, 255, 1);
}

body.filter #screen {
  background: rgba(255, 255, 0, 0.5);
  mix-blend-mode: hue;
}

body.filter p {
  color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="apagar" href="#">Apagar</button>
<button id="acender" href="#">Acender</button>

<br><br><br>

<img src="http://br.web.img2.acsta.net/pictures/17/03/23/12/22/099965.jpg" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis interdum pulvinar. Vestibulum luctus eget neque eget congue. Proin at mauris volutpat, volutpat ipsum at, sagittis urna. Fusce quis augue in risus rutrum malesuada id ac risus.
  Morbi consectetur tristique libero at feugiat. Morbi pretium justo volutpat, varius arcu a, ornare velit. Ut enim neque, fringilla interdum maximus venenatis, vulputate eu ligula. Vestibulum in varius nisl. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Sed dignissim, diam at feugiat maximus, risus tortor pharetra dolor, ut suscipit sem urna sit amet magna. Ut non nisi sed ipsum luctus facilisis. Suspendisse facilisis, velit sit amet sollicitudin aliquet,
  lacus purus laoreet nisl, vel finibus metus neque sed ex.</p>

<img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_75929395.jpg" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis interdum pulvinar. Vestibulum luctus eget neque eget congue. Proin at mauris volutpat, volutpat ipsum at, sagittis urna. Fusce quis augue in risus rutrum malesuada id ac risus.
  Morbi consectetur tristique libero at feugiat. Morbi pretium justo volutpat, varius arcu a, ornare velit. Ut enim neque, fringilla interdum maximus venenatis, vulputate eu ligula. Vestibulum in varius nisl. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Sed dignissim, diam at feugiat maximus, risus tortor pharetra dolor, ut suscipit sem urna sit amet magna. Ut non nisi sed ipsum luctus facilisis. Suspendisse facilisis, velit sit amet sollicitudin aliquet,
  lacus purus laoreet nisl, vel finibus metus neque sed ex.</p>

<img src="https://static-wix-blog-pt.wix.com/blog/wp-content/uploads/2013/12/11-Lindas-Ideias-Para-Fotos-de-Beb%C3%AAs-02.jpg" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur facilisis interdum pulvinar. Vestibulum luctus eget neque eget congue. Proin at mauris volutpat, volutpat ipsum at, sagittis urna. Fusce quis augue in risus rutrum malesuada id ac risus.
  Morbi consectetur tristique libero at feugiat. Morbi pretium justo volutpat, varius arcu a, ornare velit. Ut enim neque, fringilla interdum maximus venenatis, vulputate eu ligula. Vestibulum in varius nisl. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Sed dignissim, diam at feugiat maximus, risus tortor pharetra dolor, ut suscipit sem urna sit amet magna. Ut non nisi sed ipsum luctus facilisis. Suspendisse facilisis, velit sit amet sollicitudin aliquet,
  lacus purus laoreet nisl, vel finibus metus neque sed ex.</p>

<div id="screen"></div>