Is it possible to customise the UI of the standalone application? One of the reasons I switched to Zotero and used the Firefox extension was the ability to apply custom CSS meaning I could work with a dark UI theme.
You could try dragging a theme into the Appearance tab of the Zotero Add-ons pane, but I don't know if that would work — I can't recall anyone ever reporting doing that. I suspect you'd at least have to modify the theme package to allow zotero@chnm.gmu.edu as a targeted application, the same way that (legacy) extensions do.
From a quick test, it doesn't seem like chrome/userChrome.css works, though you can play with that more. But the Zotero UI is XUL/HTML/CSS, so in theory anything can be customized. Just a question of how much effort is involved.
(I would think a dark theme was more a job for the OS or a generic utility than something to do in individual applications, though.)
I am stuck using Windows so do not have the luxury of using an OS that offers any real capability to theme it. Its why I always opt for applications that include themes or allow users to create their own themes. Time and effort involved doesn't bother me if it results in being able to have a dark theme as I can't stand the default blinding white of most applications.
So far I have tried editing the em:targetApplication for Stylish (the extension I use to theme websites in Firefox) so that I can install it within Zotero standalone. However, whilst it installs the "Write New Style" button does not work and the "Install from URLs..." results in the add-on freezing after entering a URL.
I might have started to make some progress. Managed to find the main CSS files after unzipping the zotero.jar files. After editing and re-zipping them I have managed to make minor changes. Looks like I will just need to work through them identifying which individual files the elements from my stylish theme are contained in. Customizing the tinymce files may proof more complicated to locate and edit but so far looks like it will be possible. If so the main issue going forward will be having to make the changes again after each update.
Thanks fcheslack for the info. If I fail in editing the CSS I will try tinkering with GTK on Windows. I think, however, that there is a plain inheritance of the OS elements by Zotero rather than a reliance on GTK itself so it might not translate to Windows.
Will need to make a few other small changes to padding etc as there are white lines in couple of places - such as left edge of the Notes tab. Additionally, while text colour changes in the tags panel the background remains white. Overall though I've been able to recreate majority of what I had when using Firefox.
Edit: To fix the tag box all that was needed was to comment out the #tags box background-color: -moz-field; line in the tagselector.css file.
Hey again - so I went to C:\Users\ME\AppData\Roaming\Zotero\Zotero\Profiles and made a chrome folder and put in a userchrome.css file with the pastebin. Restart zotero and then nothing. Any tips?
@itayhad, I just tried your code on Windows and worked, with some small white parts. Do you have an updated version that would you like to share? Thank you.
on mac it doesn't play nice with items themselves, so they become unreadable, though the background and info panels work. which indicates to me that it is possible with some tweaking
Here's a screenshot of my Redesign for Zotero in dark mode! I still have to figure out some elements but it's close to being ready. There's no way to switch back and forth to light mode though without the developers adding that functionality.
This looks very promising. While switching back and forth from dark to light mode may be essential for some users, I expect I'd be quite happy with dark mode 98% of the time.
Upgrade Storage
From a quick test, it doesn't seem like chrome/userChrome.css works, though you can play with that more. But the Zotero UI is XUL/HTML/CSS, so in theory anything can be customized. Just a question of how much effort is involved.
(I would think a dark theme was more a job for the OS or a generic utility than something to do in individual applications, though.)
So far I have tried editing the em:targetApplication for Stylish (the extension I use to theme websites in Firefox) so that I can install it within Zotero standalone. However, whilst it installs the "Write New Style" button does not work and the "Install from URLs..." results in the add-on freezing after entering a URL.
Thanks fcheslack for the info. If I fail in editing the CSS I will try tinkering with GTK on Windows. I think, however, that there is a plain inheritance of the OS elements by Zotero rather than a reliance on GTK itself so it might not translate to Windows.
\chrome\skin\default\zotero\overlay.css
\resource\tinymce\skins\lightgray\content.min.css
Will need to make a few other small changes to padding etc as there are white lines in couple of places - such as left edge of the Notes tab. Additionally, while text colour changes in the tags panel the background remains white. Overall though I've been able to recreate majority of what I had when using Firefox.
Edit: To fix the tag box all that was needed was to comment out the #tags box background-color: -moz-field; line in the tagselector.css file.
The end result (so far) - http://constellations.scot/wp-content/uploads/2017/07/ZoteroCustomCSS.png
now you can find it over here:
https://pastebin.com/BNyUf2xN
i copied the script into userchrome.css in the zotero profile folder (created a new /chrome folder).
the result is far from perfect - but a good start.
C:\Users\*YOU*\AppData\Roaming\Zotero\Zotero\Profiles\*blablabla*.default\Chrome\
you should create the 'Chrome' folder in the profile folder itself
and copy the userChrome.css into it.
Thanks so much for replying so promptly. If you have any other tips, please share but I don't really know what to ask to troubleshoot this further.
(C:\Users\*YOU*\AppData\Roaming\Zotero\Zotero\Profiles\*blablabla*.default\)
in the new Chrome folder create a new file named 'userChrome.css'.
paste the css script into the 'userChrome.css' file.
than restart zotero...
this is the result:
https://i.imgur.com/TQuNHKd.png
I had it in the profiles folder - misread how you meant 'you should create the 'Chrome' folder in the profile folder itself'.
https://imgur.com/a/ppngS74
Do you have an updated version that would you like to share?
Thank you.
on mac it doesn't play nice with items themselves, so they become unreadable, though the background and info panels work. which indicates to me that it is possible with some tweaking
https://raw.githubusercontent.com/nickdvlpr/Redesign-for-Zotero/main/screenshots/redesign_for_zotero_2021.png?token=ABSCOL2KEXRVO4AIE5V6DP3ALOOK2
https://raw.githubusercontent.com/nickdvlpr/Redesign-for-Zotero/main/screenshots/redesign_dark_for_zotero_2021.png?token=ABSCOL7XDA72EJAWOF4SRGDAK77QY
@tomhigley @itayhad @quinq
Thanks so much!