Dark mode for Embedded pdf Viewer

[dpa]

Hello everyone...

I use Firefox a lot of years and i am very happy with the interface.

But i saw that there is no built-in option to change  the Mode of Embedded PDF Viewer in to Dark

Is possible to be implemented in the near Future...?

Thanks in advanced.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[jscher2000]

Hi, there is a hidden setting to change the background and toolbar areas to a dark mode, but the document will still follow the author's colors, so that's probably not what you're looking for.

But just in case you want to try it, here's how:

(A) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

More info on about:config: Configuration Editor for Firefox. Please keep in mind that changes made through this back door aren't fully supported and aren't guaranteed to continue working in the future.

(B) In the search box in the page, type or paste pdfjs.viewerCssTheme and pause while the list is filtered

(C) Double-click the preference to display an editing field, and change the value to one from the below list, then press Enter or click the blue check mark button to save the change.

• 0 => auto-detect
• 1 => Light background
• 2 => Dark background

[masoudahmadi1]

Good

[Jon]

Hey all,

Here with an exciting update…

Your idea has quickly received a great deal of votes (kudos) and support here in the Mozilla Connect community, so we are upgrading the status to “Trending idea.” This means it’s now one step closer to reaching our internal teams for review—learn more about The Idea Journey.

Please keep the conversation going (the more details, the better) and stay tuned for updates 😃

-The Community Team

[Toni]

Some programs for pdf have an option to change white background and black texts to

black background and white text.

I miss this option in firefox, so I have to use program as pdf viewer in linux

[ArkitectNaut]

PDF Reader Dark Mode Options

Would be great for the PDF reader to have a setting, similar to reader view, for dark, light, or automatic background and toolbar colour

Edit: I was testing on a new profile and I noticed that dark mode does in-fact exist for the PDF reader and that privacy.resistFingerprinting is what's causing the 'issue'. As such, an interface allowing the user to toggle dark/light mode such as the one is reader view would be great!

[heyzsh]

I've been searching for a work around and I'm pretty disappointed. I'm studying all the time and this white theme will be the reason I'll go blind. 😞

[marco]

It is possible to select colors for all web pages from the preferences: https://support.mozilla.org/kb/change-fonts-and-colors-websites-use.

If you want to do it for PDFs only, you can tweak the following prefs from about:config:

- pdfjs.forcePageColors

- pdfjs.pageColorsBackground

- pdfjs.pageColorsForeground

[RcvCollapse]

That proposed solution "works", but completely destroys all images in the document and renders them unintelligible, making it not a valid option for most PDFs. Those color settings really need to not affect media, or even better, Firefox should just respect browser dark mode settings for PDFs to begin with. Reading a blinding fullscreen-white document at night is genuinely migraine-inducing.

[Ethab83]

If you type into the console:

window.PDFViewerApplication.pdfViewer.container.style.filter = "invert(1) grayscale(1)"

the pdf will be inverted and black and white. This is my preferred dark mode because it doesn't affect the readability of the pdf, and doesnt leave the pictures inverted.

[Toni]

It gives me an error:

window.PDFViewerApplication is undefined

[Fristender]

@heyzsh @Toni 

There is a clunky(image colors reversed) way to have a dark mode in Firefox here: https://www.reddit.com/r/firefox/comments/eztxrw/dark_mode_for_firefoxs_builtin_pdf_viewer/

Basically, you create a subfolder named "chrome" in the Firefox profile directory and then create a userContent.css file in that folder. Then you paste the below contents into userContent.css and set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config.

#viewerContainer > #viewer .page > .canvasWrapper > canvas {
    filter: grayscale(100%);
    filter: invert(100%);
    background-color: #000 !important; } 

[Toni]

Thank you @Fristender . This finally works. All the best to all!

[wolfmaster010]

Give us a setting for dark pdf UI again

I love opening pdfs in Firefox. One thing that it used to give was an easy setting to enable dark mode for the UI. Unfortunately, the setting was removed a while ago. I was then able to bypass the issue by setting pdfjs.viewerCssTheme as value 2. Recent updates appear to have disabled this. This forced me how to use Cascading Style Sheets to put the dark UI back in. I know it's likely not the developers' and programmers' faults, but why has Firefox been so set on changing or removing important and/or accessibility settings lately??

Rant aside, I want this setting re-implemented. For me, this setting is an important accessibility setting. My mind constantly wanders away while I'm reading. By having a dark background and UI (example shown in the image), I'm able to focus more on the pdf than the wide screen. Please, put this back in.

image.png

[Jon]

(Note: similar ideas have been merged into this thread)