userChrome.css file for a Zotero dark theme. Suggestions for improvements are welcome.
New version available for Zotero 6. Created for Zotero 5.0.92. Windows 10 compatible.
To use it follow the following steps:
- Go to your user Profile folder
- Windows users:
C:\Users\User_name\AppData\Roaming\Zotero\Zotero\Profiles\user_profile.default\
- Linux (Flatpak) users:
~/.zotero/zotero/XXXXXXXX.default/
- Windows users:
- Create a
chrome
folder - Place the
userChrome.css
file in there - Start Zotero and enjoy
I encourage everyone to play around with this and try to improve on it and theme things that I didn't manage to. These include the following elements:
- Scrollbars (that is usually done via userContent.css in Firefox but it doesn't work in Zotero)
- New PDF reader
- Note editor (in Zotero 6)
- Menu colors
- Sub-categories in the Preferences dialog. Not satisfied with the preferences dialog but it's the best I could make it
If you wish to explore for additional elements to alter:
- Go to the folder of my Zotero install (
C:\Programs(x86)\Zotero
) - Copy the zotero.jar folder to another folder
- Use 7zip to unzip zotero.jar to a zotero folder
- Go to
D:\X\zotero\chrome\skin\default\zotero
- Look at ALL .css files in this folder
- Start testing different pieces of code to change the defaults in the userchrome.css file.
To implement a dark theme in the Note Editor in Zotero 5 (credit to 10cks) follow the subsequent steps:
- Start Zotero
- Go to Preferences -> Advanced -> Config Editor
- Select "I accept the risks!"
- Search
extensions.zotero.note.css
and double-click it - Insert the string in the Note_editor_css.txt file
- Click "OK" or close the dialog box
- Restart Zotero.
Dark theme compatible with MacOS is available as a fork maintained by yiktungho: https://github.com/yiktungho/Zotero-Dark-Theme/tree/mac-patch