(Answer: Can't be changed through extensions) Controlling PDF background color (behind pages) in Edge / Chromium

[matteyas]

I've noticed that the extension, if turned on / off on a PDF, switches the background color (behind the actual PDF pages). I think it switches between #333333 and #c4c4c4. Is it possible to control this manually? I tried searching for those colors in the dev tools customization page but didn't find anything that seemed connected to the PDF reader mode.

Picture clarification, with Dark Reader on in the first (lighter gray behind the pages) and off in the second (darker gray):

[Gusted]

Due to technical difficulties, that's not possible.

[matteyas]

Thanks for the answer, I'll mark it if you can clarify a bit. There is a change when the extension is used, so something is going on. Is it a non-local change? I'd be fine with changing it even if it changes the color in other places. Is it not controlled by the extension at all?

[Gusted]

Imagine you have a canvas with a beautiful painting on it, you cannot draw or touch individual things on that canvas. But you can apply this filter over the whole canvas. This filter doesn't map to a specific color, but to the inverse of the color, it's not controlled to what the output would be.

[matteyas]

Unfortunate! Thanks for the help.

[r3a1d3a1]

The trick is to make the dark gray margins white, just like the PDF's background.
One potential solution: filter: brightness(4) invert(0.9).
A fancier solution could involve 'mix-blend-mode'.

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

[matteyas]

I think I did try PDF Reader but it didn't quite work if I recall correctly; I use Opera GX so it's not a pure Chromium browser.

I found another extension, PDF Viewer, which does work and although it doesn't support styling natively, it does render PDF:s in HTML so I wrote an AHK script to input some JS code into the console. (The PDF Viewer extension kinda takes ownership when opening PDF:s so my CSS/JS injection extension can't run.)

This is the script I use if anyone would possibly want to consider this solution (the result isn't perfect by any means, so any suggestions for JS code—a {raw} sendinput near the bottom of the script—that runs better visual tweaks would be appreciated):

; dark mode PDF (operagx)
^+a::
  KeyWait, Shift
  KeyWait, Ctrl
  KeyWait, a

  WinGet, Active_ID, ID, A
  WinGet, procname, ProcessName, ahk_id %Active_ID%
  if (procname = "opera.exe") {
    WinGetActiveTitle, title
    ControlGet, dev_visible,Visible,, Chrome_RenderWidgetHostHWND2, %title%

    ; if it's not enabled already, send ctrl+shift+i to enter dev / inspect mode
    if (dev_visible = 0) {
      send +^i
    }

    ; wait until it's active
    while (dev_visible = 0) {
      WinGetActiveTitle, title
      ControlGet, dev_visible,Visible,, Chrome_RenderWidgetHostHWND2, %title%
      Sleep, 250
    }

    ; run some javascript to modify elements, then exit dev mode
    sendinput {RAW}elems = document.getElementsByClassName("pdfViewer")[0].children; for (elem of elems) elem.style.webkitFilter = 'brightness(0.99) invert(0.9)';
    sleep, 500
    send {Enter}
    sleep, 500
    send +^i
  }
  return

Before vs. After:

[matteyas]

To verify, and add another comparison shot, I tried the PDF Reader in Edge using the suggested styling: