31

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.

Community
  • 1
  • 1
SynergerySid
  • 1,219
  • 1
  • 6
  • 8

6 Answers6

81

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

javascript:(function(){var el = typeof viewer !== 'undefined' ? viewer : document.body; el.style.filter = 'grayscale(1) invert(1) sepia(1) contrast(75%)';})()

Then, click on this bookmark after you open a PDF in Firefox.

Ibraheem Ahmed
  • 11,652
  • 2
  • 48
  • 54
SynergerySid
  • 1,219
  • 1
  • 6
  • 8
  • 2
    Please add steps like how to achieve the outcome(As suggestion queue is full, adding my view of how to apply this trick, as follows), 1. Open the file (which is saved locally or from a downloadable link) in the browser 2. Then, Click on the bookmark (That will update the style of the document to dark related colors) – Aravinth Apr 30 '22 at 09:12
  • 2
    Or you can just click F-12, switch to "Console" Tab and paste the script – fluid undefined Jul 12 '22 at 16:02
  • 1
    `Uncaught ReferenceError: viewer is not defined` – EnthusiastiC Nov 05 '22 at 15:27
  • 1
    For me, i found that `grayscale(1)` and `sepia(1)` were too harsh - instead i just kept `'filter: invert(1) contrast(50%)'` which just inverts the blacks and whites and adds a contrast of 50% so you get a nice grey backdrop against a white-ish text. – need_to_know_now Feb 07 '23 at 14:12
  • In Firefox 109.0.1 (64 bit) on Linux Mint, the location/address field will be called the URL field. It doesn't matter what you set the location field (bookmark folder) to or what you set the name to. – Madhav Malhotra Feb 15 '23 at 01:38
  • 1
    @EnthusiastiC Try putting this code in the location or address field instead: `javascript:(function(){var el = typeof viewer !== 'undefined' ? viewer : document.body; el.style = 'filter: grayscale(1) invert(1) sepia(1) contrast(75%)';})()` It'll work on all pages. – Madhav Malhotra Feb 17 '23 at 21:49
  • Is it possible to have separate bookmarks for solarized dark and solarized light? – Porcupine Aug 27 '23 at 11:23
13

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 → More Troubleshooting Information (Troubleshooting Information on older versions of Firefox).

  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!

Marnix
  • 3
  • 1
Alfian Hamdani
  • 179
  • 1
  • 5
6

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");
    }
)()
psydvl
  • 69
  • 1
  • 5
4

This is how to make the full page dark

Tutorial

  1. Add a new Bookmark
  2. Copy the following snippet: javascript:(function(){document.body.parentElement.style = 'filter: grayscale(1) invert(1) contrast(0.8)';})()
  3. Paste it into the bookmark's address
  4. Save the bookmark
  5. Whenever you're on a PDF, click on the bookmark

Explanation

This is a bookmark that executes Javascript (this is why it starts with javascript and not with http or https). In the Javascript code we get the root html tag (document.body.parentElement) and change it's style .style = 'filter: grayscale(1) invert(1) contrast(0.8)';.

That's literally everything :)

Myzel394
  • 1,155
  • 3
  • 16
  • 40
0

For those with other FireFox PDF Viewers apart from PDF.js, enter image description here it may not always be possible to run unsecured JS but the viewer may have its own inversion options .

enter image description here

K J
  • 8,045
  • 3
  • 14
  • 36
-1

This worked for me

  1. Go to this site https://www.yourjs.com/bookmarklet/
  2. input this script (was mentioned above too)
    javascript:(function(){document.body.parentElement.style = 'filter:
        grayscale(1) invert(1) contrast(0.8)';})()

Open your PDF in Firefox as you normally would and it will make the pages dark.

Omar Elmenawi
  • 1