Dark Theme UserChrome.css

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
  • https://ibb.co/p3MzqRW - a screenshot for you guys to see.
  • 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;
    }
  • 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
  • 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?
  • 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.
  • Thanks a lot, Pedro. It looks great !!!
  • 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.
  • 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.
  • 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. :)
  • 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.
  • 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.
  • Made some more updates to my dark theme in Github if anyone is interested in using it.
  • Great, Thanks again. This mod theme have been very useful
  • Thanks, Pedro, This Theme is very helpful.
  • 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.
  • 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!
  • I would welcome if any dev could point me to the changed pane name to theme that with a dark background.
  • 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.
  • Before I could change that with treechildren::moz-tree-row{height: 30px !important}
  • 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.
Sign In or Register to comment.