Customizing 5.0 user interface

dstillman Zotero Team
edited July 11, 2017
This discussion was created from comments split from: Now available: Zotero 5.0.
  • AbeStew
    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.
  • dstillman Zotero Team
    edited July 11, 2017
    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.)
  • AbeStew
    edited July 11, 2017
    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.
  • fcheslack Zotero Team
    edited July 11, 2017
    GTK3 theme applies cleanly to Zotero 5 on linux. It seems theoretically possible to install GTK themes on windows, but may be involved. Here's a relatively recent answer on doing so https://stackoverflow.com/questions/36464010/change-gtk3-look-on-windows
  • AbeStew
    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.
  • AbeStew
    edited July 11, 2017
    Turned out to be a lot easier than anticipated. Only need to modify two files:

    \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
  • AveryA
    Hey Alasdair, could you provide a guide for constructing the dark theme? It'd be wildly appreciated no doubt.
  • itayhad
    i don't remeber where i got this css (probably somewhere on userstyles.org)
    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.
  • AveryA
    edited October 30, 2018
    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
    in windows usually the folder is:
    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.
  • AveryA
    I did not find an original Chrome folder nor did placing the userChrome.css file in the correct location induce any changes.

    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.
  • itayhad
    Create a new folder named 'Chrome' in the zotero profile folder
    (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
  • AveryA
    Ah - put it in the *blablabla*.default folder. It works and thank you so incredibly much!

    I had it in the profiles folder - misread how you meant 'you should create the 'Chrome' folder in the profile folder itself'.

  • aliakhavan89
    I went through it and this is what I am seeing on Mac; totally crap.

    https://imgur.com/a/ppngS74

  • jasonlustig
    @itayhad I just tried this on the mac and it doesn't do anything at all.
  • alanlivio
    @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.
  • quinq
    there's a version here that apparently works quite well on windows, but sadly not fully on mac: https://github.com/Rosmaninho/Zotero-Dark-Theme

    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
  • nickdvlpr
    edited March 17, 2021
    I'm working on redesigning Zotero for MacOS and I think I'll be able to convert it to Dark Mode as well! Here's my progress so far:

    https://raw.githubusercontent.com/nickdvlpr/Redesign-for-Zotero/main/screenshots/redesign_for_zotero_2021.png?token=ABSCOL2KEXRVO4AIE5V6DP3ALOOK2
  • tomhigley
    I'd be quite delighted to have Zotero in Dark Mode for MacOS.
  • nickdvlpr
    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.

    https://raw.githubusercontent.com/nickdvlpr/Redesign-for-Zotero/main/screenshots/redesign_dark_for_zotero_2021.png?token=ABSCOL7XDA72EJAWOF4SRGDAK77QY

    @tomhigley @itayhad @quinq
  • tomhigley
    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.
  • itayhad
    Beautiful work @nickdvlpr
    Thanks so much!
  • joaofrgomes
    Any updates on this homebrew attempt at customising Zotero's interface on the Mac, @nickdvlpr ? Also, your screenshots are no longer accessible…
Sign In or Register to comment.