4

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

enter image description here

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:

enter image description here

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.

5 Answers 5

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 enter image description here enter image description here

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

enter image description here

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. enter image description here

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

3
  • 1
    That snipped from stackoverflow works fine, as far as I can tell, and has the advantage of being easily reverted - it's a toggle!
    – cipricus
    May 8, 2023 at 22:03
  • 1
    I mean this: stackoverflow.com/a/71777470/12141355
    – cipricus
    May 8, 2023 at 22:09
  • Otherwise I don't read pdfs in the browser, as long as I have Okular in Linux. (Available in Windows too, but don't know about dark mode there).
    – cipricus
    May 10, 2023 at 11:19
1

In Firefox version 112.02 this works for me:

force Firefox pdf viewer background and foreground colors

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.

Since only background and foreground colors are forced, images within the pdf stay intact which is really nice (other/older solutions inverted the pdf completely).

Example image 1

versus

Example image 2

1
  • I tried it on Firefox 124.0 to change the pdf background color. The background color was indeed changed, but the image color became black and white. Tried different pdf files, and the colorful images became black and white. Would you like to test this on the latest Firefox?
    – nlite
    Mar 27 at 17:03
0

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

1
  • 1
    Firefox addons that change colors on websites doesn't affect PDFs as far as I see.
    – cipricus
    Dec 16, 2019 at 20:41
0

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".
0

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/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .