Applying CSS filters to PDFs

Zylphyr

I often feel eye strain looking at black on white or white on black PDFs on modern displays, because modern displays are often optimized for high contrast and the amount of luminance difference between black and white pixels can be really high. I experimented with some CSS filters to reduce the contrast, and I feel they could be useful for reducing eye strain.

Below is a comparison. Left is the original image, right is after the CSS filter: blur(0.1px)brightness(0.8)invert()brightness(0.7)invert()sepia(0.2)

https://s3.amazonaws.com/zotero.org/images/forums/u2922533/lzli4nkk4a9y82ybl8ki.png


I wonder if we can add support for a custom (user editable) CSS filter applied to all reader content? I imagine the addition be like:

- In settings have a custom CSS filter field next to the light/dark mode toggle.
- In reading view, have a toggle button to enable / disable the filter.

I suggested CSS filter syntax because it's a well-known technology and Zotero is already using web views. Allowing user-editable CSS filters will not only allow users to fully customize it but also enable other use cases such as simulating a grayscale display, or simulating how a color-blind person would see.

Thank you!