[Feature Request] Exclude UI chrome in built-in pages (like PDF reader) on browsers that support a UI dark mode

[munael]

Feature Request

Is your feature request related to a problem? Please describe

Example: Google Chrome. It supports a dark mode for the UI, which affects the built-in PDF reader. DarkReader then darkens the entire page dynamically (same with filter/filter+ modes), which properly darkens most PDF files. It, however, ends up inverting the UI elements that Chrome provides for the PDF reader.

Describe the solution you'd like

Dynamic mode to include some special rules for UI elements in built-in pages in browsers that support a UI dark mode.

Additional context

[munael]

Oh. Found this: https://github.com/darkreader/darkreader/issues/3647

[Gusted]

Hi @munael!

Click Dark Reader icon.
Click Dev tools (in the bottom-right corner).
Click Preview new design.
Disable the extension for PDFs (click Settings, Enable for PDF files).

Regards, Gusted

[munael]

Hi @Gusted!

I'm aware of enabling/disabling for PDF files separately. The feature request is for dynamic mode to recognize the internal PDF reader and treat its UI specially. So that when Google Chrome itself is set to dark mode (and thus the PDF reader's UI is dark), DarkReader does not invert those UI elements into light.

[Gusted]

Hi @Gusted!

I'm aware of enabling/disabling for PDF files separately. The feature request is for dynamic mode to recognize the internal PDF reader and treat its UI specially. So that when Google Chrome itself is set to dark mode (and thus the PDF reader's UI is dark), DarkReader does not invert those UI elements into light.

That's a problem, they expose those element under the same element as the PDF itself. So anything affecting the pdf will affect those elements.

[luo-chuan]

If you use Firefox, you can edit userContent.css like this:

@media (prefers-color-scheme: dark){
  .pdfViewer{filter: invert(1) hue-rotate(180deg);}
}

If you use Chrome or Edge, install the extention "PDF Reader", then edit the extention option like this:

html[data-theme*="dark"] .pdfViewer{
  filter: invert(1) hue-rotate(180deg);
}