Fullscreen inverted luminance filter for dark themed browsing but keeping hues in CSS

Question

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.

Answer 1

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;}