How to dim the blue light on a website?

Question

How to dim the blue light on a website?

Navigation

#1 by (13 votes)
#2 by (7 votes)
#3 by (6 votes)
#4 by (5 votes)
#5 by (4 votes)

12

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

Is there a way for CSS, JS, or some other language?

javascript html css

asked by anonymous 11.10.2017 / 09:09

5 answers

What is the difference between = and = in Java? How to make this arrow in CSS

score 13 · Answer 1

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

mix-blend-mode: multiply;

And here we define that the color "cut" will be the 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 blue, but this would be a problem if blend-mode fails in older browsers. The 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 does not disturb the user:

pointer-events: none;

This causes our filter to stay on the page, but does not affect the mouse pointer, touches 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>

If it is an old browser and blend mode fails, 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

As a matter of curiosity, the motivation for the reduction of blue light is related to 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 light, especially their chromatic "temperature". Redder / orange (hot) colors are better suited for dusk and dusk, while more "bluish" colors (cool, not restricted to blue specifically) are suitable for the morning.

More details here:

link

Final Note

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

You could even change this CSS or update dynamically 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 was not feasible.

score 7 · Answer 2

With a little CSS and Javascript with jQuery I did what follows. Click the blue Run button below to test and see the Light Bulb and Light Bulb buttons.

$("#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>LoremIpsum</h1><p>Loremipsumdolorsitametconsectetueradispiscingelitvolupat.</p><buttonid="acender">Acender a luz</button>
<button id="apagar">Apagar a luz</button>

score 6 · Answer 3

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

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

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

Ok, no more lenga-lenga:

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

STILL there is no way that is actually intended for the decrease of blue light in WEB practices. However thinking of a suitable alternative came the CSS3 filtering options

filters are a powerful tool capable of manipulate all the coloring of an element on the page.

Thinking about it, I'll use filter: sepia Which of course has noticeably warmer colors and may be able to reduce the blue light emitted by the device.

See:

$("#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>ReduzirLuzAzul</h1><p>Vocêpodeescolheraporcentagemde0a100%desepia.</p><buttonid="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 entire page will become a great piece of useless right? (the sepia 100% button is proof of this).

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

score 5 · 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 of it and created another one too, which darkens all color components in 3/4.

link

$("#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><divclass="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>

score 4 · Answer 5

Good morning!

I've been going for a while and I think I have something more or less on the line you're saying, if I've understood what you mean by "lessening the blue light." See if it's more or less what you want. I used mix-blend-mode to overlay the screen with a filter by 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><buttonid="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>Loremipsumdolorsitamet,consecteturadipiscingelit.Curabiturfacilisisinterdumpulvinar.Vestibulumluctusegetnequeegetcongue.Proinatmaurisvolutpat,volutpatipsumat,sagittisurna.Fuscequisaugueinrisusrutrummalesuadaidacrisus.Morbiconsecteturtristiqueliberoatfeugiat.Morbipretiumjustovolutpat,variusarcua,ornarevelit.Utenimneque,fringillainterdummaximusvenenatis,vulputateeuligula.Vestibuluminvariusnisl.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.Seddignissim,diamatfeugiatmaximus,risustortorpharetradolor,utsuscipitsemurnasitametmagna.Utnonnisisedipsumluctusfacilisis.Suspendissefacilisis,velitsitametsollicitudinaliquet,lacuspuruslaoreetnisl,velfinibusmetusnequesedex.</p><imgsrc="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>Loremipsumdolorsitamet,consecteturadipiscingelit.Curabiturfacilisisinterdumpulvinar.Vestibulumluctusegetnequeegetcongue.Proinatmaurisvolutpat,volutpatipsumat,sagittisurna.Fuscequisaugueinrisusrutrummalesuadaidacrisus.Morbiconsecteturtristiqueliberoatfeugiat.Morbipretiumjustovolutpat,variusarcua,ornarevelit.Utenimneque,fringillainterdummaximusvenenatis,vulputateeuligula.Vestibuluminvariusnisl.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.Seddignissim,diamatfeugiatmaximus,risustortorpharetradolor,utsuscipitsemurnasitametmagna.Utnonnisisedipsumluctusfacilisis.Suspendissefacilisis,velitsitametsollicitudinaliquet,lacuspuruslaoreetnisl,velfinibusmetusnequesedex.</p><divid="screen"></div>