I view a lot of pdf documents via firefox, the light gray background makes my eyes and head hurt after prolonged usage. In the past I found a solution on this forum that advised to set pdfjs.viewerCssTheme to "2" in about:config. This set the background of pdf viewer to black/dark gray. This has worked for years until recently when the pdf viewer switched to light mode again (pic 1). I checked the about:config settings for pdfjs.viewerCssTheme but there appears to be no change. I tried restarting the browser, setting the theme to 0 and to 2 again, updating browser. Sadly the theme is still light gray. Is there a way to change it again? The desired outcome is in pic 2. I do NOT want to change the color of the pdf pages themselves.

for some reason uploading the pictures changed their order. I hope the context still makes my question clear

The pdfjs.viewerCssTheme setting was removed in Firefox 121 for being partially broken (Bug 1863201).

You can change the PDF viewer background color with userContent.css:

@-moz-document unobservable-document() {
  body:has(.pdfViewer) {
    background-color: rgb(42 42 46) !important;
  }
}

@zeroknight Thank you for your help, this worked really well! This is only a small thing, but is there also a way to change the color of the toolbar container at the top of the pdf viewer? I suppose I would have to change both the color of the container and the color of the text.. if this would be too problematic, then no problem. I'm glad I could change the color of the background at all

This is based on an older approach, which is to take all of the dark theme rules -- the ones Firefox would use if you went to the Web Appearance section of the Settings page and selected Dark -- and stuff those into your userContent.css file.

/*** Firefox 121 PDF Viewer Dark Theme for userContent.css ***/
/* 

    These rules are from 
    resource://pdf.js/web/viewer.css or
    https://searchfox.org/mozilla-release/source/toolkit/components/pdfjs/content/web/viewer.css
    Lines within:
    @media (prefers-color-scheme: dark) {}

 */
@-moz-document unobservable-document() {
  body:has(.pdfViewer) {
    --main-color:rgb(249 249 250);
    --body-bg-color:rgb(42 42 46);
    --progressBar-color:rgb(0 96 223);
    --progressBar-bg-color:rgb(40 40 43);
    --progressBar-blend-color:rgb(20 68 133);
    --scrollbar-color:rgb(121 121 123);
    --scrollbar-bg-color:rgb(35 35 39);
    --toolbar-icon-bg-color:rgb(255 255 255);
    --toolbar-icon-hover-bg-color:rgb(255 255 255);
    --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
    --sidebar-toolbar-bg-color:rgb(50 50 52);
    --toolbar-bg-color:rgb(56 56 61);
    --toolbar-border-color:rgb(12 12 13);
    --button-hover-color:rgb(102 102 103);
    --toggled-btn-color:rgb(255 255 255);
    --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
    --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
    --dropdown-btn-bg-color:rgb(74 74 79);
    --separator-color:rgb(0 0 0 / 0.3);
    --field-color:rgb(250 250 250);
    --field-bg-color:rgb(64 64 68);
    --field-border-color:rgb(115 115 115);
    --treeitem-color:rgb(255 255 255 / 0.8);
    --treeitem-bg-color:rgb(255 255 255 / 0.15);
    --treeitem-hover-color:rgb(255 255 255 / 0.9);
    --treeitem-selected-color:rgb(255 255 255 / 0.9);
    --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
    --thumbnail-hover-color:rgb(255 255 255 / 0.1);
    --thumbnail-selected-color:rgb(255 255 255 / 0.2);
    --doorhanger-bg-color:rgb(74 74 79);
    --doorhanger-border-color:rgb(39 39 43);
    --doorhanger-hover-color:rgb(249 249 250);
    --doorhanger-hover-bg-color:rgb(93 94 98);
    --doorhanger-separator-color:rgb(92 92 97);
    --dialog-button-bg-color:rgb(92 92 97);
    --dialog-button-hover-bg-color:rgb(115 115 115);
    --loading-icon:url(images/loading-dark.svg);
    --editor-toolbar-bg-color:#2b2a33;
    --editor-toolbar-fg-color:#fbfbfe;
    --editor-toolbar-border-color:#2b2a33;
    --editor-toolbar-hover-bg-color:#52525e;
    --editor-toolbar-active-bg-color:#5b5b66;
    --editor-toolbar-focus-outline-color:#0df;
    --alt-text-tooltip-bg:#1c1b22;
    --alt-text-tooltip-fg:#fbfbfe;
    --alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
    --dialog-bg-color:#1c1b22;
    --dialog-border-color:#1c1b22;
    --dialog-shadow:0 2px 14px 0 #15141a;
    --text-primary-color:#fbfbfe;
    --text-secondary-color:#cfcfd8;
    --focus-ring-color:#0df;
    --hover-filter:brightness(1.4);
    --textarea-bg-color:#42414d;
    --radio-bg-color:#2b2a33;
    --radio-checked-bg-color:#15141a;
    --radio-checked-border-color:#0df;
    --button-cancel-bg-color:#2b2a33;
    --button-save-bg-color:#0df;
    --button-save-fg-color:#15141a;
  }
}
/*** END PDF Viewer DARK THEME ***/

take all of the dark theme rules and stuff those into your userContent.css file.

Only do this if you are prepared to maintain it long-term. It will break every time colors are changed between versions, anything from minor cosmetic issues to major usability issues due to invisible controls.

The pdfjs.viewerCssTheme setting was removed in Firefox 121 for being partially broken (Bug 1863201). You can change the PDF viewer background color with userContent.css: @-moz-document unobservable-document() { body:has(.pdfViewer) { background-color: rgb(42 42 46) !important; } }

This CSS snippet is better:

@media (prefers-color-scheme: dark){

  .pdfViewer{filter: invert(1) hue-rotate(180deg);}

}

^: note that your CSS code also affects images, what may not be what you want in case of a PDF file with images.

You can also look at these two pdfjs.pageColors prefs in about:config.

• pdfjs.pageColorsBackground Canvas (#FFFFFF) => #000
• pdfjs.pageColorsForeground CanvasText (#000000) => #FFF