Force the built-in PDF reader to dark mode in Firefox 81 (desktop)
I would like to use a dark-themed PDF reader while keeping the default theme for the rest of Firefox's UI.
I am attaching a modified screenshot of what I would like the setup to look like. What didn't help me:
- Dark Reader extension - this inverts the colors of the PDF's pages, not the reader's UI
- setting ui.systemUsesDarkTheme to 1 - this changes the UI theme entirely
Is there a way to force the built-in PDF reader to always use dark mode?
FF 81.0, x64, Win 8.1
Modified by Václav Trpišovský
Chosen solution
In case it's of interest, there is a new (much easier) option in Firefox 85:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste the new preference name
pdfjs.viewerCssTheme
If this preference was already created and shows a value of 0 or 1, skip to step (4).
(3) On the bar with the bolded preference name, click the radio button next to Number and click the + button to add the preference. Then Firefox should display the new value.
(4) Set the value to **2** for a dark theme (double-click to edit if necessary) and click the blue checkmark button to save the change. (For reference, 0 is automatic -- looks to system theme -- and 1 is Light.)
Screenshot attached for reference. This should affect new or reloaded PDF viewer tabs.
Read this answer in context 👍 1All Replies (5)
There is a thread of how to do a similar thing with CSS templates, but I would prefer a specific about:config entry or another simple method as I want to apply the change on all my PCs.
Hi Václav, my answer in https://support.mozilla.org/questions/1305573 is the only way I know to modify the PDF viewer without affecting other built-in pages.
Update for Firefox 85: https://support.mozilla.org/en-US/questions/1306374#answer-1389132
Modified by jscher2000 - Support Volunteer
Thank you. I managed to get the chrome\userContent.css file working only after flipping toolkit.legacyUserProfileCustomizations.stylesheets configuration in about:config to true (necessary in Firefox 68+ AFAIK), all fine after that. I am only adding this as it is not mentioned in most tutorials on the topic.
Modified by Václav Trpišovský
I'm glad you found it. I had listed it as point (E) but perhaps I should have put the full details instead of referring back to the "HOW" page.
Chosen Solution
In case it's of interest, there is a new (much easier) option in Firefox 85:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste the new preference name
pdfjs.viewerCssTheme
If this preference was already created and shows a value of 0 or 1, skip to step (4).
(3) On the bar with the bolded preference name, click the radio button next to Number and click the + button to add the preference. Then Firefox should display the new value.
(4) Set the value to **2** for a dark theme (double-click to edit if necessary) and click the blue checkmark button to save the change. (For reference, 0 is automatic -- looks to system theme -- and 1 is Light.)
Screenshot attached for reference. This should affect new or reloaded PDF viewer tabs.
