How can I enable dark mode when viewing a pdf file in firefox

Question

I have enabled the dark mode in Firefox version 76.0 as well as installed the dark reader extension. The extension allows web pages to go dark. These changes do not affect any PDFs that have been opened in Firefox.

Answer 1

Recording this for anyone who has this problem

Create a bookmarklet - a bookmark with the following in the location/address field

javascript:(function(){viewer.style = 'filter: grayscale(1) invert(1) sepia(1) contrast(75%)';})()

Hope this helps.

Answer 2

You can see it in https://pncnmnp.github.io/blogs/firefox-dark-mode.html

1. Open Firefox and press Alt to show the top menu, then click on Help ? Troubleshooting Information
2. Click the Open Folder button beside the Profile Folder entry
3. Create a folder named chrome in the directory that opens
4. In the chrome folder, create a CSS file with the name userContent.css
5. Open the userContent.css file and insert -

#viewerContainer > #viewer > .page > .canvasWrapper > canvas {
   filter: grayscale(100%);
   filter: invert(100%);
}

6. On Firefox's URL bar, type about:config.
7. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
8. Restart Firefox and fire up a PDF file to see the change!

Answer 3

Simple bookmarklet toggler
Just run snippet and drag link to Bookmarks Toolbar

<a href="javascript:(function(v) {v.style = v.classList.contains('dm')?'':'filter: grayscale(1) invert(1) sepia(1) contrast(75%)';v.classList.toggle('dm');})(viewer)">PDF darkmode toggler</a>

Unminified:

(
    function() {
        if (viewer.classList.contains("dm")) viewer.style = "";
        else viewer.style = "filter: grayscale(1) invert(1) sepia(1) contrast(75%)'";
        viewer.classList.toggle("dm");
    }
)()