×
all 6 comments
sorted by:
old (suggested)
besttopnewcontroversialq&a

[–]jscher2000Firefox Windows 2 points3 points  (5 children)

What you see in the PDF viewer, each individual page, is an HTML <canvas>. There is a transparent text layer in front of the canvas for searching and selecting; that doesn't need any changes. You can invert the canvas using a CSS filter. For example:

#viewerContainer > #viewer > .page > .canvasWrapper > canvas {
    filter: invert(100%);
}

The selection highlight is hard to see on black, so you could modify the color:

#viewerContainer > #viewer > .page > .textLayer ::selection {
    background-color: yellow;
}

You can apply these rules using a userContent.css file which goes into the same folder as a userChrome.css file (content being for the web content area and chrome being for the UI).

Unfortunately, colorful brochures probably will look ridiculous. It's difficult to do anything custom with this one.

[–][deleted] 0 points1 point  (1 child)

Hey. Thanks for the help about this. Would there be any way to change the background color to black and the text to white, while keeping all other colors intact? Thanks in advance.

[–]jscher2000Firefox Windows 0 points1 point  (0 children)

Possibly. I'm not very knowledgeable about canvas styling. Because there is a transparent text layer, if you were able to black out the background -- so it was black on black -- you could color the text layer white for reading.

[–][deleted] 0 points1 point  (2 children)

Oh also, what's the full path to save this to? I haven't been able to locate where the userChrome.css would go.

​

Edit: Nevermind, I found the location. However, how do I make my browser load my .css file every time I open a .pdf? Thanks.

[–]jscher2000Firefox Windows 0 points1 point  (1 child)

how do I make my browser load my .css file every time I open a .pdf?

Firefox should apply userContent.css to every page. The selectors in the above rules should always match the PDF Viewer. Are there particular URLs where it doesn't work?

If it doesn't work anywhere:

If you are setting up a userChrome.css or userContent.css for the first time in Firefox 69 or later, you also need to set Firefox to look for the file at startup:

[–][deleted] 0 points1 point  (0 children)

Ah thank you, your first page was very helpful (I'd already seen the 2nd). I just needed to change the name from userChrome.css to userContent.css. Thank you so much for the help, I really appreciate it.