Other browser extension(s) interfere with Zotero snapshot import
Hi everyone.
I've only just learned of Zotero a few hours ago, when I was finally fed up with my existing web clipper tool and wanted to upgrade to something that is both more powerful, privacy respecting and thus self-hosted. I tried a few others (and particularly liked Obsidian), but the snapshot import of Zotero and the advanced full-text search in attachments/snapshots blows everything else out of the water, doesn't it?
Thank you for offering this great open source tool for our use and enjoyment!
Anyway, I've noticed a minor compatibility issue, where an existing dark theme on a website - whether one that is inherent to the website, or one that is added on via a browser extension - is either overwritten or ignored when you have activated the "Use Dark Mode for Content" feature.
While doing so with websites that already provide a dark theme hasn't shown to be an issue worth noting - I've tested a few example sites and found that it works fine, although the color of text can change and lead to a slightly worse readability - the same can't be said for the browser extension I use to add a dark mode to websites that don't offer one.
When Dark Reader (https://addons.mozilla.org/en-US/firefox/addon/darkreader/) is active, Zotero reverses the changes the extension made and displays the snapshot in light mode. The only way to get the client to display the snapshot correctly is to uncheck "Use Dark Mode for Content" and then re-check it again, which means that all previously imported snapshots will be displayed wrong by default. It's not like I can disable this feature either, because then it won't work on other types of attachments.
Now I'm sure it would be possible to computationally check whether a website or a snapshot uses a light or dark theme, but that's probably a lot of work to determine and there's probably enough ambiguity in CSS styling, that this won't ever be solved completely. The easiest thing for users is to simply disable the dark reader extension for the website, use the Connector and then turn it back on. It's what I'll do from now on to not run into it again.
With that said, if you wanted to, there's something you could do to alleviate the issue. It would not only fix previously imported snapshots, but also reduce potential compatibility issues for the future.
Dark Reader is probably the most popular dark theme browser extension that exists today, so I'm looking at this first. The simplest solution I can see to fix its display issue is for Zotero to check whether the extension was active at import time and if yes skip the activation of its internal dark mode entirely. It's a very simple check in the HTML header tag:
< html lang="en" style="" data-darkreader-mode="dynamic" data-darkreader-scheme="dark" >
A more general and future proof approach would be for attachments to gain an attribute that determines whether the internal dark mode is allowed to be used on them. The "Use Dark Mode for Content" functionality is currently an application-wide setting, but the client already stores some settings for each document (scale, scroll position). I hope this means that this could be expanded upon with a more granular dark mode setting.
Best regards,
Daniel
I've only just learned of Zotero a few hours ago, when I was finally fed up with my existing web clipper tool and wanted to upgrade to something that is both more powerful, privacy respecting and thus self-hosted. I tried a few others (and particularly liked Obsidian), but the snapshot import of Zotero and the advanced full-text search in attachments/snapshots blows everything else out of the water, doesn't it?
Thank you for offering this great open source tool for our use and enjoyment!
Anyway, I've noticed a minor compatibility issue, where an existing dark theme on a website - whether one that is inherent to the website, or one that is added on via a browser extension - is either overwritten or ignored when you have activated the "Use Dark Mode for Content" feature.
While doing so with websites that already provide a dark theme hasn't shown to be an issue worth noting - I've tested a few example sites and found that it works fine, although the color of text can change and lead to a slightly worse readability - the same can't be said for the browser extension I use to add a dark mode to websites that don't offer one.
When Dark Reader (https://addons.mozilla.org/en-US/firefox/addon/darkreader/) is active, Zotero reverses the changes the extension made and displays the snapshot in light mode. The only way to get the client to display the snapshot correctly is to uncheck "Use Dark Mode for Content" and then re-check it again, which means that all previously imported snapshots will be displayed wrong by default. It's not like I can disable this feature either, because then it won't work on other types of attachments.
Now I'm sure it would be possible to computationally check whether a website or a snapshot uses a light or dark theme, but that's probably a lot of work to determine and there's probably enough ambiguity in CSS styling, that this won't ever be solved completely. The easiest thing for users is to simply disable the dark reader extension for the website, use the Connector and then turn it back on. It's what I'll do from now on to not run into it again.
With that said, if you wanted to, there's something you could do to alleviate the issue. It would not only fix previously imported snapshots, but also reduce potential compatibility issues for the future.
Dark Reader is probably the most popular dark theme browser extension that exists today, so I'm looking at this first. The simplest solution I can see to fix its display issue is for Zotero to check whether the extension was active at import time and if yes skip the activation of its internal dark mode entirely. It's a very simple check in the HTML header tag:
< html lang="en" style="" data-darkreader-mode="dynamic" data-darkreader-scheme="dark" >
A more general and future proof approach would be for attachments to gain an attribute that determines whether the internal dark mode is allowed to be used on them. The "Use Dark Mode for Content" functionality is currently an application-wide setting, but the client already stores some settings for each document (scale, scroll position). I hope this means that this could be expanded upon with a more granular dark mode setting.
Best regards,
Daniel
Zotero should respect the original webpage style. DO NOT BREAK THEM!