PDF image colors are inverted after applying custom dark css for web

DEVONthink Feedback
1

I have been using DevonThink for macOS and iOS for almost half an year now and thanks for the great tool. Certainly a huge upgrade from Evernote.

As I sometimes use DevonThink as an ad-hoc browser for specific sources, recently I am trying to tinker with custom css to also enable dark mode for the webpages I browse.

I used the settings Preference->Web->Style Sheet and select my own two-line css:

html{
filter: invert(1) hue-rotate(180deg);
}
img{
filter: invert(1) hue-rotate(180deg);
}

This simple css works pretty well as a (filter/non-responsive) dark mode.

When I try to capture the webpage as ‘PDF (One Page)’ clicking the gear icon on the address bar, the PDF saved has all of the website’s original color (light color), which is absolutely fine, as I do not intend to save it in dark mode too. But even in original color, the website’s images are still saved inverted in the PDF.

You may compare the attached screenshot of the captured PDF, and the original website as linked:

screenshot
screenshot1384×1410 198 KB

dev.to/akhilarjun/one-line-dark-mode-using-css-24li

Since I am using a custom css, I understand this may not be a bug and maybe a problem of how I implement the dark mode. Thus, I would like to ask is there any way I may fix it, so I can use a dark mode css for web, and at the same time capture it as PDF correctly, or maybe you can look into the issue on your side?

Thanks in advance!

2

It might be a bug of the WebKit framework used to generate the PDF document as the system’s dark mode support is not as great and complete as one might expect. Or it’s a side-effect of your CSS. Which version of macOS do you use? Are your CSS definitions limited to dark mode like this?

@media (prefers-color-scheme: dark) {
...
}
3

Thanks for getting back!

I am using the latest Catalina, 10.15.7, with Safari 14.0 and all updates installed. DEVONthink Pro version is 3.5.2.

I did not add prefers-color-scheme or any other code to try to detect system dark mode preference. Those two lines were the only content of my CSS. :joy:

Please let me know if I can help with providing any log/ debug info. Thank you!

4

I would suggest to limit your CSS definitions to dark mode (see above).