Colour inversion feature?

[John Z.]

Looking for an advice, or help in perhaps implementing the feature from the title.

A lot of websites I run into have typical 'white background/dark font' colour scheme; as I work during nights, this is pretty stressful on my eyes.
I've attempted to override all websites using custom stylesheet and set stylesheet command, but this often loses specific styling for specific parts, and it happens that text ends up being hidden, not emphasized, etc.

What I'd love to be able to do, is to simply invert all the colours with a command, which can then be mapped like all other commands.
I can vaguely recall having plugin for this in Firefox long ago.

[Daniel Carl]

@machinedgod Hm, my first thought was to use following in the custom style-sheet.

html {
    -webkit-filter: invert(100%);
}

But this looks strange to me - an on some sites - where the images set as background the images are not shown. But this might help to get a better approach.

[John Z.]

This is actually a pretty great tip, thank you!
I could override the background image I suppose, in such cases. I am not looking for something that looks perfect (I don't even think this is possible to do in a generalized manner), but just something to help my eyes adjust to light.

Edit:
after the first attempt, I think its a fantastic solution. I've set the inversion to 85% and its real easy on the eyes.

For anyone else stumbling upon this, here's a full solution:

~/.config/vimb/style.css
-----------------------------
html {
  -webkit-filter: invert(85%);
}

~/.config/vimb/config
--------------------------
...
# Toggle on/off
nnoremap zs :set stylesheet!<CR>
# Set off
nnoremap zS :set stylesheet!<CR>
...

Comparison screenshots after hitting zs combo: