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.

3 Answers 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

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

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

Maybe with this workaround:

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

function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        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;}'));
    return true


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);

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.