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.

[sawanm9000]

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.

[sawanm9000]

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.

[qwer1304]

Why isn't this preference exported to Options?

That was easy to fix:

Added a new viewerCssTheme template to extensions/chromium/options/options.html

<template id="viewerCssTheme-template">
<div class="settings-row">
  <label>
    <span></span>
    <select>
      <option value="0">Auto</option>
      <option value="1">Light</option>
      <option value="2">Dark</option>
    </select>
  </label>
</div>
</template>

Added title and description fields to viewerCssTheme in extensions/chromium/preferences_schema.json

"title": "Set Theme CSS",
"description": "What CSS should be used.\n 0 = Default (uses system CSS).\n 1 = Light.\n 2 = Dark.",

[alonetrifle]

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.

worked perfectly i was going to use pdf.js on chrome but this worked very well thanks for your help <3 ,also happy new year

[Silur]

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.

Does not work on 84.0.1 (64-bit) arch linux

[bjorn3]

Do you have privacy.resistFingerprinting set to true? That will force a light mode theme to be reported to everyone.

[Snuffleupagus]

Please note that after PR #12625, there's a preference that can be used to force the use of either the light or dark viewer theme.

Specifically, for the Firefox built-in PDF Viewer, the preference is named pdfjs.viewerCssTheme and can be created/set using about:config starting with Firefox 85.
The Firefox preference is of the number-kind, with the following values supported:

• 0 = automatic theme, based on e.g. operating system and/or browser settings; this is the default value.
• 1 = light theme.
• 2 = dark theme.

With those changes I don't believe that we can realistically do much more about this issue here, and any further improvement requests (w.r.t. to e.g. auto-detecting the mode "better") would need to be filed in Bugzilla instead.

[A6GibKm]

Thanks for the headsup, saddly it did not work here.

[Snuffleupagus]

sadly it did not work here.

Without any more context/information, such a statement unfortunately isn't actionable!

If I were to guess, you might have missed the "starting with Firefox 85."-part in #12290 (comment).

[timvandermeij]

Closing since all that can be done on our end is done now. The rest should be tracked upstream in Bugzilla instead.

[A6GibKm]

@Snuffleupagus Thanks for the reply, otherwise I would have never seen that small, and very easy to miss detail ( /s ), indeed it worked thanks.