Question posted in 
My goal is to read the PDF file through the PDF.js library and display the PDF in a dark mode with black background and white text and preserve the original state of the images from the document.
With the help of PDF.js examples, I was able to display PDF document on a canvas and apply a filter to invert black and white colors.
#the-canvas { filter: invert(1); }
I am having a problem with preserving the original colors of the images that are present in the pdf.
Is there a way in CSS to invert only grayscale colors?
2
Answers
hue-rotate(Degree_of_rotation_in_num) is your solution. For Inverse, it will be hue-rotate(180). Use it with your { filter: invert(1) }.
Another is a CSS property called mix-blend-mode, for that, it’s better to read documentation to learn about it.
Yes it can be done!
If you have access to the source (that is how it is done in Acrobat)!
Taking the example from the proposed fiddle.
We can see from page 2 the base file has been instantly inverted 100% such that everything is reverse colour gamut. Thus the blue sky’s are not blue but reversed (more like yellows).
Therefore we simply need to extract the yellow image and reverse just that to blue. Then reposition it over the yellow rendering.
To be effective you have to have images that are independent of the page and be able to reposition their reversed form in exactly the same position. So very easy in a PDF editor. But jsPDF is not a full blown PDF editor like Acrobat Reader has for accessibility and forms etc..