…we have also added a “reduce eye strain” mode, which changes the tone
of the light emitted by the screen from blue-violet to warm
red-orange, which is more pleasant at night, reduces eye fatigue, and
won’t keep you awake.
This sounds like something web apps might want to provide as an optional filter.
The simplest way I can think to accomplish this is to add a giant pointer-events: none div over the entire screen with an off-white low alpha and one of those Adobe blend modes.
For best results, maybe use a pseudo-element like body::after.
I actually thought you could apply such a filter on the entire page by merely setting a CSS value on
<body>. I guess, that would be just too easy -.-
No, you’re right - you can set a filter rule directly on
body. Just tested this now. To achieve a channel-biased filter, you also need to create an SVG element or CSS shader.
It might be doable with
<feComponentTransfer>. SVG filter primitives are really weird and seem like they were grafted on from someplace else, so they tend to be capable of things you woudn’t necessarily suspect.