Open AlexMeier99 opened 2 years ago
Rosmaninho
commented
2 years ago Holy crap! That's amazing! We can take the theme to the next level now. In Zotero 6, the Note editor changed so the previous theme for it stopped working. It might be a good idea to use this in that case then. Shame about the .pdf reader, although you probably saved me plenty of hours to figure out I wouldn't be able to theme it.
AlexMeier99
commented
2 years ago Thank you very much for your kind words.
The issue concerning the styling of the PDF reader/viewer (both terms are used ambigously in the code base for some reason) might also apply to the new(er) note editor. The code of both components is developed in reposititories exclusive to each of them. Same (seems) to apply to the way how there treated in Zotero at runtime. From a cyber sec point of view this sounds reasonable to me. It's a lot of JavaScript after all. Think XSS leading to access to the file system, etc.
However I'd like to highlight that I lack the knowledge required to express a qualified comment on this. English is unfortunately not my mother tongue so I might end up putting my thoughts in false leading terms.
I'd be very grateful if someone of the Zotero maintainers or dev community could step in to give some insights on the following questions:
secondaryToolbar witch is not visible to user at this time (-> contains buttons for fullscreen view, file metadata, etc. -> it's the dropdown menu top-right in pdf.js when embedded in Firefox) -> it's fully styled with custom icons and everything just not yet visible -> is it not yet ready/stable?userChrome.css they don't even show up in devtools -> very strange ❔❕filter: invert(1) to a window tab (browser element in Zotero DOM tree) containing a pdf reader view -> inverting its colors -> that raised more questions: Why does it not work for any child element of this browser element like for the main window (-> the library tree listing)AlexMeier99
commented
2 years ago I'd like to extend my first comment on top. (I'll stick to the abbreviation 'devtools' for 'developer tools' in the following.)
For legal reasons I'd like to highlight that when proceeding you act on your risk. Possible damages or losses caused to you personally or anyone else by following this tutorial or using legacy software in general might occur. As noted above I'm not a qualified IT professional or a lawyer but an average daily user of Zotero.
Concerning the init and prep of the remote debugging session:
First of all when reading the following links do not forget that Firefox and Mozilla both moved on and changed significantly since the release of version 60. So many statements in the docs are not (fully) applicable to the described setup. Witch heavly relies on legacy software components. I'd like to emphasize that I highly encourage the reader to not used multiple machines for the following but instead run everything on the same PC. If you prefer to take the risk you should search for devtools.debugger.force-local in the Zotero config later on.
Disconnecting from the internet before using an aged browser might also be a good idea if your not prepared to take risks.
I highly recommend to make Firefox' top-left menu bar visible (by checking in the section for modifing the 'appearance' of Firefox) if not already done. This is not mandatory but it should ease the following steps.
about:debugging in Firefox location bar and hit enter -> notice the lack of the network section featured in newer versions -> head to developer menuabout:config) window -> confirm the security warning about the non-exisiting warranty (sic!) AlexMeier99
commented
2 years ago Short update: the note editor runs in an iframe -> inverting the colors of the whole editor component works by appling filter:invert(1) to it. However I'd like to point out that this is a bad practice as it might lead to trouble with low contrast colors.
tefkah
commented
2 years ago Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.com/ThomasFKJorna/zotero-night
ClandestineClout
commented
2 years ago Interesting. I wonder if certain Firefox extensions could be adapted for zotero.
Rosmaninho
commented
2 years ago Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.comThomasFKJorna/zotero-night
How does one install your theme to test it?
tefkah
commented
2 years ago Thanks man, this really helped me! I did figure out a way to style the pdf/viewer, you need to do some JS, see https://github.comThomasFKJorna/zotero-night
How does one install your theme to test it?
Ah I haven't really set up proper CD, gimme a sec
tefkah
commented
2 years ago Otherwise you need to install it as a dev which is honestly a pain in the ass
Rosmaninho
commented
2 years ago Ooof, I won't be able to do anything like what you did. That looks awesome by the way.
tefkah
commented
2 years ago You can try it out now! See https://github.com/ThomasFKJorna/zotero-night/releases
Still slightly jank but less so
tefkah
commented
2 years ago If anyone here wants to help out cssing/create more themes/test drive I'd love your help! :)
Rosmaninho
commented
2 years ago That looks awesome! In Windows I noticed the following issues:
How did you theme the PDF reader and note editor? Was it javascript? Also how did you remove the border from the tab-bar when you open pdfs? I failed to find a way to remove them! Love your work, it's awesome to see someone finally build up on what I've been doing. :D Heck, I think your work should be merged with mainline Zotero even!
tefkah
commented
2 years ago Thank you so much for the kind words, really appreciate them and the work you already put into the CSS file!
Good points, I am on a Mac so I don't see the Menubar on the window, but I should add that. The tags is something I still need to fix, I don't use them that much myself so I hadn't noticed them yet haha.
And yes, you do need to use javascript in order to theme the PDF reader. They are in separate iframes which the CSS from the "main" frame can't reach. The annoying part is knowing when the PDF reader is properly loaded, as Zotero does provide some hook for letting you know a tab is added, but that is before the contents are loaded, so if you add a style tag with the CSS for the PDF reader when Zotero says "hey there's a new tab" it will just overwrite it because it's still adding content to the page 🙄
I think I just removed the border by doing border: none !important, but I'm not sure!
Ideally I'd like zotero-night to kind of turn into a theming platform for Zotero as it has very little support for it atm, so if you have any suggestions for what you think would be a good way to use such a platform (e.g. would just being able to change colors enough, or loading custom css, or injecting custom js at specific places?) let me know!
There's lots of other things I'd like to be able to change about the look of Zotero, not all of which are probably possible. For instance I'd like the items in the "Collection View" to have some more padding, but that seems hardcoded into zotero :(
If you have any other suggestions lemme know! I'm just trying stuff haha
tefkah
commented
2 years ago Also being able to change the scrollbars would be sick but that does not seem possible in the old version of firefox that Zotero is using (only 8 versions later and we could have 😭). For instance, I wanted to make the top menu bar scrollable instead of filling up with ever smaller tabs, but either I just remove the scrollbar there or it'd look really bad. Mabye removing it would actually be okay now that I think about it, browsers don't have one either. Just need to add some buttons.
Custom scrollbars could probably be done with some custom JS, but I'm not sure if that is doable without manually targeting every single scrollable object, which seems a bit much haha
Rosmaninho
commented
2 years ago Thank you so much for the kind words, really appreciate them and the work you already put into the CSS file!
Good points, I am on a Mac so I don't see the Menubar on the window, but I should add that. The tags is something I still need to fix, I don't use them that much myself so I hadn't noticed them yet haha.
And yes, you do need to use javascript in order to theme the PDF reader. They are in separate
iframes which the CSS from the "main" frame can't reach. The annoying part is knowing when the PDF reader is properly loaded, as Zotero does provide some hook for letting you know a tab is added, but that is before the contents are loaded, so if you add a style tag with the CSS for the PDF reader when Zotero says "hey there's a new tab" it will just overwrite it because it's still adding content to the page 🙄I think I just removed the border by doing
border: none !important, but I'm not sure!
On which parameter? .tabs? .tab? That doesn't seem to work on my end. :(
Ideally I'd like zotero-night to kind of turn into a theming platform for Zotero as it has very little support for it atm, so if you have any suggestions for what you think would be a good way to use such a platform (e.g. would just being able to change colors enough, or loading custom css, or injecting custom js at specific places?) let me know!
There's lots of other things I'd like to be able to change about the look of Zotero, not all of which are probably possible. For instance I'd like the items in the "Collection View" to have some more padding, but that seems hardcoded into zotero :(
If you have any other suggestions lemme know! I'm just trying stuff haha
I think what you did is already great. I would love to see alternative color themes. :) But I think first just finishing polishing stuff is more important. With your work I think you should reach the Zotero devs and see if they're willing to collaborate with you. This is way above whatever I could make. I just played with this stuff like I like to play with Firefox userChrome.css.
tefkah
commented
2 years ago On which parameter? .tabs? .tab? That doesn't seem to work on my end. :(
Ah I see it's just the
* {
border: 0 !important
}that I took from your file!
Otherwise look into #tab-bar-container .tab.selected:not(.highlighted) and #tab-bar-container .tab:not(:selected)
Otherwise I'm not sure which border you are referring to!
Rosmaninho
commented
2 years ago 
The line that goes from the tab and to the end of the window.
Hi @Rosmaninho
first of all 👍 for compiling and maintaining these informations.
I figured how to use the Firefox devtools (DOM tree Inspector, Network requests, ...) in Zotero and thought it might be helpful for someone else:
(The following applies to Windows 10) -> Edit: please do see my comment below before proceeding
about:config(preferences -> advanced) in Zotero for the keyword 'devtools' to prepare remote debuggingI'd like to highlight that I was not able to style the PDF reader (pdf.js) CSS styles seem to be dynamically inserted using JavaScript within the Zotero GUI (-> react app). However I could style everything else (e.g. window actions menu -> File, Edit, View, ...).
I'm happy to help with questions concering the workflow above. Hope this might be helpful to anyone. I had quite a hard time figuring this out. Unfortunately there's very little information on this so far.
Regards, Alex