Pdf.js: Always in light mode even when using a dark mode firefox theme

[bjorn3]

Attach (recommended) or Link to PDF file here: Any pdf

Configuration:

• Web browser and its version: Firefox Developer Edition 81.0b1 (64-bit)
• Operating system and its version: Debian 10
• PDF.js version: PDF.js: 2.6.276
• Is a browser extension: Firefox builtin pdf reader

Steps to reproduce the problem:

1. Set builtin dark theme for Firefox.
2. Open any pdf in Firefox.

What is the expected behavior? (add screenshot)

pdf.js uses dark colors

What went wrong? (add screenshot)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): N/A

[timvandermeij]

@utopianknight From your screenshots you did manage to get the viewer in the dark theme, and the code is also there. Do you perhaps have an idea why this might not work here?

[brendandahl]

Strange, dark mode works fine for web version, but not built in version. Looks like there's some code to override this in Firefox. I'll open an upstream bug.

[brendandahl]

One thing to clarify, using a dark mode theme in Firefox doesn't change everything to dark mode that uses the CSS prefers-color-scheme: dark. That has to be set at the operating system level.

Though even if I set the OS to dark mode, the built in PDF viewer doesn't change themes.

[utopianknight]

This seems to be a problem with Firefox, not PDF.js. Open this and play around with it in Firefox and in a chromium browser:

• https://codepen.io/jonneal/pen/vzPwWo

Until this is fixed and as a temporary workaround, I can make the dark theme the default since it's what Firefox users have been accustomed to.

[utopianknight]

Changing the theme with Menu > Customize > Themes > Light/Dark does not work.

But changing the theme in the dev tools (with devtools.inspector.color-scheme-simulation.enabled set to true in about:config) does work.

[bjorn3]

One thing to clarify, using a dark mode theme in Firefox doesn't change everything to dark mode that uses the CSS prefers-color-scheme: dark. That has to be set at the operating system level.

Unfortunately setting a dark mode theme for the xfce desktop is not detected by firefox.

[brendandahl]

On linux there isn't a concept of light/dark mode in gtk, so a heuristic is used https://searchfox.org/mozilla-central/rev/d54712b9644b49cec6cc90a9e0c325fdfab04e7c/widget/gtk/nsLookAndFeel.cpp#1009-1023

[brendandahl]

Though even if I set the OS to dark mode, the built in PDF viewer doesn't change themes.

After a browser restart dark mode is working on MacOS for me.

[Silur]

untill today using the Dark Reader addon worked fine but after yesterday's update the pdf.js page got "protected by browser" so addons cannot access it and we are back to the eye burning bright version

[sunjerry019]

A temporary fix that worked for me was going to about:config and adding a new property ui.systemUsesDarkTheme of type Number with value 1.

[bjorn3]

Thanks @sunjerry019 for pointing me to that config!

[A6GibKm]

The solution by sunjerry019 did not work for me. What did work was setting privacy.resistFingerprinting to false. This is clearly not a good solution.

[k4yt3x]

I can confirm setting privacy.resistFingerprinting to false also works for me.

[A6GibKm]

Somehow privacy settings do not allow the hack heuristic described above used to detect dark theme on gtk.

[bayuah]

I can confirm that @sunjerry019 method works for me on my Lubuntu 20.04 system.

A temporary fix that worked for me was going to about:config and adding a new property ui.systemUsesDarkTheme of type Number with value 1.

[gsbnlda]

A temporary fix that worked for me was going to about:config and adding a new property ui.systemUsesDarkTheme of type Number with value 1.

not working on win 10 64 bit FF stable.

[gsbnlda]

I need help still do not find a best solution to make all web pages in dark mode with clear fonts . tried add-ons night eye , dark reader , midnight lizard, shadowbox , https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ , css file ( https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme ) but not perfect dark mode with clear fonts . pages are not well settled in center and boxes are not perfect. set ui.systemUsesDarkTheme to 1 in about:config also not working .

[Mulej]

How hard would it be to add a toggle to the secondary toolbar for toggling dark/light mode (regardless of the system theme)? This would add a workaround for all current and any future issues with light/dark mode detection.

[k4yt3x]

I hope this gets addressed soon. For now I'm downloading all PDFs and viewing them locally so my eyes aren't burnt out. Turning off RFP works, but is not a solution nor a workaround. It's a security compromise.