Repository navigation
|
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): |
Replies: 3 comments 6 replies
|
Due to technical difficulties, that's not possible. |
|
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? |
|
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. |
|
Unfortunate! Thanks for the help. |
|
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);
} |
|
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
}
returnBefore vs. After: |
|
To verify, and add another comparison shot, I tried the PDF Reader in Edge using the suggested styling: |
|
For people years later looking for how to control the PDF background color beside the pages in Chromium-based browsers, it's technically possible with another method. I have created PDF Dark Overlay for Chrome PDF Viewer for this. This uses Tampermonkey (although you can do it temporarily on the page); for easy repetition the next time you want to activate a clean dark mode together with the background. Adds sidebar masks and backdrop-filter over Chrome's PDF viewer, allowing tools like Dark Reader to have a clean dark PDF viewer without:
Drag the overlay edges to resize them or use the floating menu to adjust brightness and offset. 
FIRST EXAMPLE (note, brightness can be tweaked, settings menu can be closed, also drag the sidebar's edges to adjust their width depending on magnification to hide the white background)
FULL DARK EXAMPLE (topbar brightness and sidebar brightness all the way down)
Tweaks automatically save per user, and defaults can be changed in the variables section. Requires Allow access to file URLs to reach file:/// or objects in files, as well as the Allow User Scripts so that Tampermonkey can run. USERSCRIPT LINK (get the Tampermonkey Chrome extension if you do not have it and add the requirements to run on files): GITHUB (if you want to see the code or full description): https://github.com/Artectdis/pdf-dark-overlay |
|
That's a very nice idea! Do you have to drag the overlays manually? |
If you use Firefox, you can edit userContent.css like this:
If you use Chrome or Edge, install the extention "PDF Reader", then edit the extention option like this: