Dark Theme UserChrome.css

Pedro Rosmaninho · November 4, 2020

Dear all,

I polished a userchrome.css file to create a dark theme for Zotero. This is the best I could do by myself.
There's things that are still not working, so if you guys want to help maybe we could finish polishing this to create a nice dark theme?

This is based on a stylish theme that was mentioned in the previous thread: https://forums.zotero.org/discussion/70647/dark-theme-for-main-zotero-window-black-background-white-text

Here's the .css:

/*:::::::::::::::::::::::::::::::::::::::::::::::::::: Zotero :::::::::::::::::::::::::::::::::::::::::::::::::::*/
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #nav-bar { visibility: visible !important }
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #customToolbars
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #PersonalToolbar { visibility: collapse!important }
/*#PersonalToolbar {visibility: hidden !important;}*/
/*#navigator-toolbox:hover > #PersonalToolbar {visibility: visible !important;}*/
/*#main-window[stylish-url="chrome://zotero/content/tab.xul"] #BookmarkslToolbar { visibility: hidden!important; }*/

* {border: 0 !important; }

#zotero-tb, #zotero-toolbar, #navigator-toolbox { background: #323234 !important;
color: #FFFFFF !important; }

menu { color: white !important;
}
#manage-attachments-menu, #developer-menu, #layout-menu, #note-font-size-menu, #font-size-menu{ color: black !important;
}
/*NOT WORKING
#debug-output-logging-menu { color: black !important;
}
#new-item-menu { color: black !important;
}
#more-menu { color: black !important;
}
*/

#zotero-splitter{ background: #323234 !important; }

#zotero-pane{ background: #323234 !important;
color: #aaa !important; }
grippy{ opacity: .5 !important; }

#zotero-items-tree treechildren::-moz-tree-row(highlighted) { background: #323234 !important;
color: #FFFFFF !important; }

#zotero-items-tree treechildren::-moz-tree-row {
height: 30px !important;
}

#zotero-collections-tree treechildren::-moz-tree-row {
height: 30px !important;
}

#heading_wrapper {
color: #fff;
background-color: #7E7E7E !important;
}

#navigator-toolbox{ color: #FFFFFF !important; }

#zotero-collections-tree treechildren::-moz-tree-row(hover),
#zotero-items-tree treechildren::-moz-tree-row(hover) { background: #7E7E7E !important;
color: #FFFFFF !important; border: 0 !important;}

treechildren{ background: #323234 !important;
color: #FFFFFF !important; }

/*Panel with paper descriptions*/
tabpanel { background: #474749 !important;
color: #FFFFFF !important; }

tab[selected="true"]{ background: #474749 !important;
border-top: 3px solid #0a84ff !important;}

tab{ -moz-appearance: none !important;
color: #eee !important;
background: #323234 !important;
border-top: 0px solid #0a84ff !important;
border-left: 0px solid rgba(127,127,127,0.2) !important;
border-right: 1px solid #1d1d1d !important;
border-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important; }

tab:hover{ color: #FFFFFF !important;
background: #7E7E7E !important;
box-shadow: inset 0px 0px 0px !important;
border-radius: 0px 0px 0 0 !important; }

#item-type-menu
{
-moz-appearance: none;
color: white !important;
height: 1.5em !important;
min-height: 1.5em !important;
padding: 0 0 0 2px !important;
margin: 1px 5px 0 1px !important;
max-height: 1.5em !important;
border: 1px solid transparent;
background-color: transparent;
}

#zotero-date-field-status
{
color: #ffffff !important;
padding: 0 10px 0 1px !important;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::: Zotero :::::::::::::::::::::::::::::::::::::::::::::::::::*/

I have a couple of questions, hopefully someone can answer:
I couldn't theme the drop-down menu boxes, therefore I just reverted the color of the menu elements in there to black.
However, the New Item, Debug Output Logging and More menus did not adopt the black text again. I need help to find how to change them to black or make the menus black and revert the color of the other menus in the drop-down to white.

I also can't seem to change the tags box nor the color of an item selection from that baby blue (or from the collections for that matter).

Hopefully more users want to build upon this.

All the best

Pedro Rosmaninho · November 4, 2020

https://ibb.co/p3MzqRW - a screenshot for you guys to see.

Pedro Rosmaninho · November 4, 2020

Updated css

/*:::::::::::::::::::::::::::::::::::::::::::::::::::: Zotero :::::::::::::::::::::::::::::::::::::::::::::::::::
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #nav-bar { visibility: visible !important }
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #customToolbars
#main-window[stylish-url="chrome://zotero/content/tab.xul"] #PersonalToolbar { visibility: collapse!important }
/*#PersonalToolbar {visibility: hidden !important;}*/
/*#navigator-toolbox:hover > #PersonalToolbar {visibility: visible !important;}*/
/*#main-window[stylish-url="chrome://zotero/content/tab.xul"] #BookmarkslToolbar { visibility: hidden!important; }*/

* {border: 0 !important; }
/*change background color and text color of zotero toolbar and menubar*/
#zotero-tb, #zotero-toolbar, #navigator-toolbox { background: #323234 !important;
color: #FFFFFF !important; }
#zotero-toolbar {border-bottom: 1px solid #1d1d1d !important;}
/*change color of menu items to white*/
menu { color: white !important; }

/*change color of menu items in drop down menus back to black*/
#manage-attachments-menu, #developer-menu, #layout-menu, #note-font-size-menu, #font-size-menu, #debug-output-menu { color: black !important; }
/*NOT WORKING
#new-item-menu { color: black !important;
}

#new-menu { color: black !important;
}*/

#zotero-splitter{ background: #323234 !important; }

#zotero-pane{ background: #323234 !important;
color: #aaa !important; }
grippy{ opacity: .5 !important; }

#heading_wrapper {
color: #fff;
background-color: #7E7E7E !important;
}

/*change background and color of collections and items panes*/
treechildren{ background: #323234 !important;
color: #FFFFFF !important; }
/*increase spacing between rows in collections and items*/
#zotero-collections-tree treechildren::-moz-tree-row { height: 30px !important; }

/*change background and color of collections when hovering*/
#zotero-collections-tree treechildren::-moz-tree-row(hover) { background: #7E7E7E !important;
color: #FFFFFF !important; border: 0 !important; }

/*increase spacing between rows in collections and items*/
#zotero-items-tree treechildren::-moz-tree-row { height: 30px !important; }

/*change background and color of items when hovering*/
#zotero-items-tree treechildren::-moz-tree-row(hover) { background: #7E7E7E !important;
color: #FFFFFF !important; border: 0 !important; }

/*change background and color of items when selecting*/
#zotero-items-tree treechildren::-moz-tree-row(selected) { background: #474749 !important;
color: #FFFFFF !important; border: 0 !important; }
#zotero-items-tree treechildren::-moz-tree-cell-text(selected) {
color: #FFFFFF !important; border: 0 !important; }

/*change background and color of columns field selector*/
#zotero-items-tree treecol, .treecol-image { -moz-appearance: none !important;
background: #474749 !important;
color: #FFFFFF !important;
border-bottom: 1px solid #1d1d1d !important;
border-right: 1px solid #1d1d1d !important; }

/*Panel with item descriptions*/
tabpanel { background: #474749 !important;
color: #FFFFFF !important; }

tab[selected="true"]{ background: #474749 !important;
border-top: 3px solid #0a84ff !important;}

tab{ -moz-appearance: none !important;
color: #eee !important;
background: #323234 !important;
border-top: 0px solid #0a84ff !important;
border-left: 0px solid rgba(127,127,127,0.2) !important;
border-right: 1px solid #1d1d1d !important;
border-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important; }

tab:hover{ color: #FFFFFF !important;
background: #7E7E7E !important;
box-shadow: inset 0px 0px 0px !important;
border-radius: 0px 0px 0 0 !important; }

/*define color of item type field*/
#item-type-menu
{
-moz-appearance: none;
color: white !important;
height: 1.5em !important;
min-height: 1.5em !important;
padding: 0 0 0 2px !important;
margin: 1px 5px 0 1px !important;
max-height: 1.5em !important;
border: 1px solid transparent;
background-color: transparent;
}
/*define color of date-field-status*/
#zotero-date-field-status
{
color: #ffffff !important;
padding: 0 10px 0 1px !important;
}

Pedro Rosmaninho · November 6, 2020

I further refined it and uploaded it to Github.
Anyone interested in a dark theme compatible with Windows 10 can download it here:
https://github.com/Rosmaninho/Zotero-Dark-Theme

gpatten · November 6, 2020

This looks great! Let's imagine I want to see if I can get it working on a Mac: how would I go about doing that?

Pedro Rosmaninho · November 6, 2020

You would need to find the Zotero profile folder, create a folder named "chrome" and put the userChrome.css there.
Then start Zotero and see how it looks. If it looks bad then just delete the file.

kthulu · November 6, 2020

Thanks a lot, Pedro. It looks great !!!

Pedro Rosmaninho · November 7, 2020

You're welcome. Already updated a couple of more elements: in the item pane when you selected Merge Attachments or items not in tab panes they had a white border around and now they don't. Changed the color of the Retracted items background to make white text legible as well.
Already uploaded it to Github.

kthulu · November 7, 2020

Excellent, I think with the background a little darker could help to make the white text more legible. Right now your dark-theme-userchrome-css has rgb(38, 42, 43) or something closer, I suggest rgb (24, 26, 27) like dark Theme of Microsoft Windows or rgb(19, 21, 22) like Dark Reader add-on/apps for web Browsers.

Pedro Rosmaninho · November 7, 2020

I actually based my color choices on Firefox's dark theme!
You're welcome to change them on your side. I tried to document the file as much as possible to facilitate it for other people to play around and costumize to their heart's content.
I'm happy that at least one other person is enjoying it. :)

Pedro Rosmaninho · November 7, 2020

Just don't click on the File menu button. I can't identify for the life of me on how to make the New Item category in the drop-down to retain the black color. :(
If you can find a way to fix that please tell me!

It's that, and the Preferences dialog. I couldn't make it darker and use white text because I had problems with the labels. So I made it as dark as possible while keeping dark text legible. But since that's not something constantly used hopefully it's okay like this.
But if you find a work-around that then please tell me. I tried my best.

Pedro Rosmaninho · November 7, 2020

Also couldn't theme the scrollbars (even tried creating a userContent.css like in Firefox but it didn't work), the tag box and text color and the menus colors. These last ones I might lose some time when I'm bored to see if I can change them, but I'm not optimistic.

Pedro Rosmaninho · November 13, 2020

Made some more updates to my dark theme in Github if anyone is interested in using it.

kthulu · November 13, 2020

Great, Thanks again. This mod theme have been very useful

reflectical · April 5, 2021

Thanks, Pedro, This Theme is very helpful.

JosmarCristello · August 4, 2021

I've also made another version of the dark theme with some modifications, following google's Material Design guidelines. I've uploaded it to Github in case anyone needs it: https://github.com/notidentical/Zotero-Material-Dark-Theme.

itayhad · September 1, 2021

the new beta.43 is breaking the published CSS on:
https://github.com/Rosmaninho/Zotero-Dark-Theme
and here:
https://github.com/notidentical/Zotero-Material-Dark-Theme

can someone give update about the CSS changes? so the authors can fix their nice themes?

many Thanks!

Pedro Rosmaninho · September 2, 2021

I would welcome if any dev could point me to the changed pane name to theme that with a dark background.

Pedro Rosmaninho · September 2, 2021

I can't increase the row spacing in the collections and item trees using the new .row criteria. If anyone could tell me how to increase row spacing I would be welcome. I worked around everything else already.

Pedro Rosmaninho · September 2, 2021

Before I could change that with treechildren::moz-tree-row{height: 30px !important}

JosmarCristello · July 10, 2023

To anyone that is having problems with using the new Zotero Beta 7, it behaves a bit like Firefox with regards to user themes.

You can make this (and any other theme) work in Zotero Beta 7 by setting the appropriate flag:
- Go to Edit → Settings
- Click on Advanced
- Scroll down, find and click on "Config Editor".
- search for the flag "toolkit.legacyUserProfileCustomizations.stylesheets" and set it to True.
- Restart Zotero

That should make the theme work again.