8

I need help to find a work around for my quick and dirty dark browsing CSS filter that used to work nicely, but no longer works on most google pages, actually any pages with divs (I use it as a userstyle). I am in no way a programmer, just a user who suffer from severe light induced migraine and absolutely need dark-themed webpages to save my eyes, so my knowledge of CSS is understandably limited, sorry :/ This is what used to work:

html {filter: invert(100%) hue-rotate(180deg);}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}

It used to invert all colors on the page, then rotated the hues back 180 degrees to keep the hues the same, so the result was a webpage with just its luminance inverted (blue still blue, orange still orange and so on, just brighter text and accents over darker backgrounds). Then I reversed the effect on images and videos to exclude them from the filter in the final result. The result looked elegant enough to me, and better than the result of most dark-browsing chrome extensions. It used to work flawlessly, but recently something changed and any page with divs, most google pages included, have large sections of white background intertwined with the dark sections where the filter still applies. I suspect the filter is applying twice on such sections, thus reverting it to white.

Thank you very much for any help. I am pretty sure that using the html selector to apply it on the whole page is no longer the way to do it, but I am clueless on how to make it work, pardon my ignorance and thanks in advance.

Improve this question
2
  • 1
    After applying the solution on the answer and experimenting a bit, I have noticed that somehow the hue rotate filter leaves some color distortion even when rotated 180deg twice, some colors are off and about 20% saturation is lost, but not enough to make it loose its usefulness. This result is unexpected however, inverting 100% twice and hue-rotating 180deg twice should get us an unchanged image, what might be an artifact from implementation of the filters, but I do not know. Just leaving this observation for reference.
    – Vinicius Gonçalves
    Commented Nov 21, 2016 at 18:06
  • 1
    For the sake of completion, there is an extensive study on why and how hue rotating twice with css filter provide sub-optimal results, very different from the original values, in this question: stackoverflow.com/questions/19187905/…
    – Vinicius Gonçalves
    Commented Jan 31, 2017 at 14:20

1 Answer 1

Reset to default
10

I have quite good results adding a black background to the html element:

html {filter: invert(100%) hue-rotate(180deg);background:black}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}
Improve this answer
1
  • It seems to work very well, thank you, some lightness information is probably lost but does the trick! thanks
    – Vinicius Gonçalves
    Commented Nov 21, 2016 at 17:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.