Unable to change the text and background colors.

[zhyi]

From Options->Content->Colors, I can change the colors for text and background, but these settings are simply ignored. Black-on-white text can strain the eyes, so I think this feature is very important for the sake of health.

Standalone PDF readers, e.g. Adobe Reader, do support changing the colors for customizing an eye-friendly contrast.

[aleksejrs]

Is there a CSS workaround for this?

[islisis]

This is an important feature and accessibility option. Worse still, currently some font effects will obey Firefox's html user font colors, leading to unreadable text.

[raztd]

Any new updates on this? I would thrilled if this feature would be implemented in pdf.js :-)

[yardenac]

+1 please

[isgursoy]

+1

[burtonator]

Any update this... this is needed so that we can change the colors of the reader / pdf for dark mode. Where are these colors even set btw? If someone could point me to the right directly I might be able to hack it to at least build an experimental white on black version instead of a black on white version.

We can't just invert the colors because color images will break.

filter: invert(85%)

Does make regular documents go dark but the images are then broken as their color scheme is now invalid.

I think one strategy might be to make the document greyscale but then you lose the colors which isn't fun.

[nlgranger]

Wether to leave images alone is debatable. For example, the standalone evince pdf reader inverts colors of images as well. For pictures it leads to strange colors, but graphics and charts usually remain readable and it prevents issues with images having a transparent background or images with a white background that extends under the text.

[Bombastisch]

For pictures it leads to strange colors, but graphics and charts usually remain readable and it prevents issues with images having a transparent background or images with a white background that extends under the text.

This is indeed a problem, but I would already appreciate having just text inverted.
I have a lot of "just-text" documents from uni I look at everyday and having a nightmode which just inverts text and background would be a great feature when studying late.

[fuzihaofzh]

I just suggest the grayscale is acceptable. Many pdf viewers (e.g. pdf expert) provide many background colors mode. In these model, the document is converted into grayscale and then render the user-defined colors. I think this could make things simpler?

[juarezr]

A toggle button for Light/Sepia/Dark like in Firefox Reader View would be amazing.

[kddjenejfkffksd]

I look forward to this feature being implemented since currently it's a little unintuitive to read PDF in dark mode.

On Firefox, I use a JavaScript bookmarklet mentioned here (although I use this version) as a temporary solution. But it would be nicer if there were a better way to use dark theme with pdf.js, such as built-in force-dark-theme feature like the one that comes with Samsung's internet browser (or at least if extensions on Firefox could be allowed to work because AFAIK extensions like Dark Reader don't work on PDFs in Firefox).

[heitorPB]

IMO, it would be great to have a button (next to those at the top right) to toggle normal/sepia/grayscale/dark modes. I'm using bookmarklets for that, like the link from @coughingmouse's comment above.

[burtonator]

The way this has to work internally, I think, is to have it set at a lower level with the canvas fill options.

I looked into and I think it's generally possible but one issue are the colors in figures/charts. They might not look good on a dark background so we might have to get that working too.

One plan B could be to have a white background for charts/figures if possible.

[sedimentation-fault]

Following the "bookmarklet approach" by @coughingmouse, I created a bookmark on my toolbar with the following variation in the code:

javascript:(function(){viewer.style%20=%20'filter:%20grayscale(0)%20invert(0.25)%20sepia(0.8)%20contrast(100%)';})()

i.e. grayscale is at 0 (0%), invert at 0.25 (25%), sepia at 0.8 (i.e. 80%) and contrast at 100%. This does not transform the page to a bitonal document - it leaves an "idea of color" in it that I find pleasing to the eye. And sepia is not at its full potential (in combination with the chosen invert percentage), bringing the white background of a PDF page to #F4DEB6 (or so tells me the color picker of gcolor2...) - which is quite close to my favorite "Navajo White" (#FFDEAD).

Playing with a custom

chrome/userContent.css

and a plethora of settings taken from the original viewer.css of pdf.js did NOT bring ANY difference.

Changing the viewer.css file inside the .xpi file (it is just a ZIP archive) directly and setting

background-color: #FFDEAD;

for

.page
.pdfViewer .page
.thumbnailImage

did show a "navajo white" background each time the page/thumbnails were loaded - only to be overwritten by the white background of the PDF page/thumbnail itself! So forget this route, you don't need it. The bookmarklet will do its job for the moment - and for the next 10 years I guess...

[mgroth0]

What's the "viewer" in viewer.style? I tried it with the PDFViewer class and it doesn't work

[otseng]

A toggle button for Light/Sepia/Dark like in Firefox Reader View would be amazing.

Option to pass in a parameter like ?displayMode=dark would also be great.

[LeoJhonSong]

Let me do an improvement to the bookmarklet solution:
use javascript:void(document.getElementById('viewer').style.filter = 'invert(64%) contrast(228%) brightness(80%) hue-rotate(180deg)') instead.

with my code:

with code mentioned in darkreader/darkreader#374:

while the pdf originally looks like this:

So as you could notice, hue-rotate(180deg) remains colors in images in their origin shades of colors. That's why the banana in the pic above is still yellow but not wired blue 🤣

[Gitoffthelawn]

This is an important accessibility issue, and people have been seeking a fix for literally a decade. How can we encourage Mozilla to make this a priority?

[tddschn]

I love pdf.js and I'd really want inverted colors at low light environments. #8253

[shivaprsd]

For anyone interested here is a custom solution I made. It lets you render PDFs not just in dark mode but any color scheme. Similar to what @juarezr and @heitorPB suggested.

E.g. Solarized light and dark:

Try a live demo here. Unfortunately it is not part of PDF.js and will not (currently) work as an extension due to Firefox restrictions.

Edit: try the updated demo here.

[heitorPB]

That is awesome, @shivaprsd!

I'd love to see that work merged into pdf.js, do you think it is possible?

[shivaprsd]

@heitorPB Highly unlikely; see #13676 (comment) 🙂

I am attempting a Firefox add-on, will post the outcome.

[heitorPB]

That's so sad... your solution is really neat and much better than using an external PDF viewer that can invert colors.

Looking forward for your addon!

[shivaprsd]

Here it is: https://github.com/shivaprsd/doqment.

It is my first ever extension, so might be a bit naive ATM. Consider as WIP. 🙂

[fuzihaofzh]

A workaround based on the tampermonkey. This is very useful if you are reading a pdf via a browser and just want to change the background color.

https://greasyfork.org/en/scripts/437073-pdf-background-color-controller

[calixteman]

A patch is in review:
#14874

[Juraj-Masiar]

So, why is this bug closed?
The toolbar has enough space to fit a new icon that would inject CSS filter: invert(100%) hue-rotate(180deg); and that would work great for like 99% PDF and it would help so many people to save their vision in the evening when viewing PDF.
And it's trivial to implement.
I see no reason not to implement it.

[shivaprsd]

@Juraj-Masiar Because the PDF.js team has already implemented it. You just have to enable High-Contrast Mode in your OS/Firefox and choose the FG/BG colours, and it will apply to the PDF viewer and all web pages as well.

Edit: it is behind HCM because the team deemed this is likely an accessibility feature.

[qwer1304]

The bookmarklet in #2071 (comment) by @LeoJhonSong works nicely in the viewer window, but the thumbnails remain unaffected (white). What needs to be added so that it applies to thumbnails too as in @shivaprsd excellent doqment extension when Filter is chosen? Thx

[shivaprsd]

@qwer1304 You can add document.getElementById('thumbnailView').style.filter to the JS. The full bookmarklet would look like (gets long):

javascript:void(document.getElementById('viewer').style.filter = document.getElementById('thumbnailView').style.filter = 'invert(64%) contrast(228%) brightness(80%) hue-rotate(180deg)').

[qwer1304]

@shivaprsd Thank you. It worked.