Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

How to set PDF viewer in firefox to dark mode again (after it stopped working)

  • 7 trả lời
  • 1 gặp vấn đề này
  • 94 lượt xem
  • Trả lời mới nhất được viết bởi cor-el

more options

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.

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.
Đính kèm ảnh chụp màn hình

Được chỉnh sửa bởi K vào

Giải pháp được chọn

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;
  }
}
Đọc câu trả lời này trong ngữ cảnh 👍 1

Tất cả các câu trả lời (7)

more options

K said

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

Hữu ích?

more options

Giải pháp được chọn

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;
  }
}

Hữu ích?

more options

@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

Hữu ích?

more options

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 ***/

Hữu ích?

more options

jscher2000 - Support Volunteer said

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.

Hữu ích?

more options

zeroknight said

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);}

}

Được chỉnh sửa bởi luo.chuan vào

Hữu ích?

more options

^: 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

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.