Change pdf page and font color displayed in internet browsers

Question

Can the displayed color of page and font of PDF files be changed when opened in Chrome, Firefox or other browsers?

---

I want to read long PDF texts on a laptop while being able to change both color of page background and of text. I am not interested in inverting colors — which would result in bright white text on dark black background

but in adjusting the color of each of these two elements and getting something more balanced and eye-pleasing, similar to the way ebook readers display ebooks:

This is possible with different PDF readers. In Linux I can use Adobe Reader, Foxit Reader, and especially Master PDF Editor, which is able to change the displayed page&font color not only in text-based PDFs (text documents saved/exported/printed as PDF) but also in image-based PDFs (paper text scanned and saved as PDF). More details on that here.

---

What about internet browsers? I know the main ones are great at reading PDF files.

Answer 1

Hmm Chrome currently still cannot but Older Browsers could be customised as much as you wished within their abilities, here inversion is simply pressI

In Current Firefox you can set a bookmarklet for colour changing but your mileage may vary see
https://stackoverflow.com/questions/61814564/how-can-i-enable-dark-mode-when-viewing-a-pdf-file-in-firefox

the following example uses the toggler variant as shown here and in https://stackoverflow.com/a/71777470/10802527

Not many people understand that to view a PDF in a "Browser", in reality it MUST be downloaded (unless a smoke and mirrors, copy of pages as images with html text overlay). Thus for Chromium/Edge you can set to "Download Only" and then open the PDF in a "Dark Reader". You can dispose of the pdf afterward if unwanted, same as browser would with its cached copy.

For Windows you can use SumatraPDF (shown above) or Okular (shown below), or for Linux, Okular native or SumatraPDF (32/64/Arm) in Wine.

Answer 2

In Firefox version 112.02 this works for me:

In the address bar type:

about:config

In the search field type:

pdfjs

Set these configuration options:

pdfjs.forcePageColors          true
pdfjs.pageColorsBackground     #202020 
pdfjs.pageColorsForeground     #d1d1d1

switch to a tab with a pdf loaded and hit F5 (refresh) to see the result.

Answer 3

I checked chromium based browsers and Edge and the answer is no. The PDF viewer included is vary basic. You might keep an eye out for third party extensions but I haven't found any

Answer 4

If the browser views are sophisticated enough, they should be able to handle Optional Content Groups (OCGs). You could then create a second version of that text that would appear over the first with your desired colors/background/anything/at/all.

Whatever was generating the PDF would have to be pretty damn PDF-savy as well. Various Adobe products could probably do it natively, but you may need a copy of Acrobat to perform the necessary changes.

IIRC, you can also toggle OCGs visibility with JavaScript. And I'm pretty sure you can use JS to detect when a PDF is viewed in a browser. Lemme check.

OCGs strike me as a feature that would have, at best, mixed support across browsers' native PDF renderers, to say nothing of properly executing their JavaScript.

I'm guessing this would work fine for everyone who was using Reader as their in browser viewer, and break for (almost?) everyone else.

In doing a little more research:

• "PDF.js" does support Optional Content Groups. PDF.js is the open source PDF renderer used by chrome (and probably firefox and several others).
• PDF.js has a "white list" of javascript actions that are permitted. No idea what those specific actions might be... but they probably don't include one that changes the OCG state of the document. I further suspect that the whitelisted actions are all hard-coded behavior on the back end. "The JS action matches this string, so do that".

Answer 5

Maybe with this workaround:

Paste this in the browser console (Ctrlshifti) and click enter

function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        q[0].parentNode.removeChild(q[0])
        return false
    }
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    return true
}

toggle()

Source: https://dev.to/jochemstoel/re-add-dark-mode-to-any-website-with-just-a-few-lines-of-code-phl

Other option:

var cover = document.createElement("div");
let css = `
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #cecece;
mix-blend-mode: difference;
z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);

Adapted from: https://windowsreport.com/invert-colors-pdf/