Dark mode for Firefox's built-in PDF viewer

Surprisingly, Firefox's PDF viewer does not have a native option to invert colors in PDF. Presently no extension exists which can do this job. Dark Reader does not work with PDF's. At around 8'O clock today, I decided to fix the problem once and for all with a simple Firefox extension.

After hunting on the web for about 30 minutes, I found this thread on Bugzilla. It turns out starting with Firefox 60, extensions are no longer allowed to interact with the native pdf viewer. Determined, I decided to locally modify the CSS rendered by Firefox's PDF viewer. The steps for the same are:

(Following is a fix I created by mixing Superuser - How can I override the CSS of a site in Firefox with userContent.css? with Reddit - Dark PDF Preview)

Open Firefox and press Alt to show the top menu, then click on Help → Troubleshooting Information Click the Open Directory button beside the Profile Directory entry Create a folder named chrome in the directory that opens In the chrome folder, create a CSS file with the name userContent.css Open the userContent.css file and insert - #viewerContainer > #viewer > .page > .canvasWrapper > canvas { filter: grayscale(100%); filter: invert(100%); } On Firefox's URL bar, type about:config . Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true . Restart Firefox and fire up a PDF file to see the change!

Screenshot of Firefox rendering a PDF with dark background