Dark theme for main ZOtero window (black background, white text)

Most Windows programs have settings to set the background to black and the text colour to white (or some other colour-scheme that's easier on the eyes than the default black-on-white). It would be very nice if this option appeared in a future version of Zotero!
  • Agreed; definitely an improvement - just some simple kind of basic theming would be wonderful.
  • Yes, please! I am still using Zotero 4 with a legacy version of Firefox because my eyes really rely on the ability to have a dark interface. If at the very least Zotero 5 could provide an easy way to override styles (userchrome.css?) and the ability to use Web Developer to determine element selectors, that would be perfect. I don't want to have to modify any files that will be overwritten upon updating Zotero, and I need the Web Developer add-on or else figuring out how to select elements will take muuuch longer. (I already tried to modify Web Developer to get it to install, but without any luck, since I have no experience making FF add-ons.)

    Thanks for such a great product.
  • Might be relevant to note that the corresponding environment variables that would seem to control background colour, don't appear to have an effect when changed. I used the advanced settings editor to set variables such as browser.display.background_color and browser.display.focus_background_color to black (#000000), but after restarting Zotero (v5.0.37, under Win 10), the background is still white.
  • @longtalker:

    Yes, that is not surprising. Zotero didn't use those values from Firefox, and so it still doesn't use them as a standalone. But you do bring up an interesting idea: it would make sense to set some of the colors as variables that can be easily changed through that interface.
  • Just want to add my two cents: a dark mode / night mode feature would be awesome! Would really help us late-night grad students :)
  • This solution may not work for everyone's needs, but while we're waiting for a Zotero dark mode I thought I'd mention the very handy negativescreen utility. When I'm working at night I just leave all my Windows programs in light/day mode and invert everything with negativescreen.

    https://zerowidthjoiner.net/negativescreen
  • I've been using the Gnome theme "Adwaita Dark", which does change the UI elements for Zotero to a nice dark theme. However, I now have the problem where all of the UI text remains black. So it's very hard to read text.

    Changing text colour in Zotero's settings doesn't seem to have an effect. Not particularly keen to change my whole system theme for one app. Does anyone know if there's something in the source that can be changed maybe?
  • 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.

  • I wish Zotero would come with a dark theme. And the updated icons from Firefox or Thunderbird for that.
    If they could make Zotero compatible with the theme engine of either one, it would be awesome.
  • Ok, I did the same as itayhad and played around a bit with the userchrome.css file. I think I improved it a lot but since I barely know what I'm doing this is the best I could make it:

    /*:::::::::::::::::::::::::::::::::::::::::::::::::::: 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{ background: #696969 !important;
    color: #eee !important; }

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

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

    treechildren,
    tabpanel *{ background: #333 !important;
    color: #aaa !important; }

    tab[selected="true"]{ background: #333 !important; }

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

    tab:hover{ color: #eee !important;
    background: RGB(51, 153, 255) !important;
    box-shadow: inset 0px 0px 0px !important;
    border-radius: 0px 0px 0 0 !important; }

    /* Folders */
    treechildren::-moz-tree-image(folderNameCol) { list-style-image: url("folder-pane/folder.svg") !important; }
  • You guys try it and tell me what you think of it. To me, that's a reasonable dark theme. But I don't know how to change icons nor the UI elements that are not named over there like scrollbars and the like.
  • Just another user expressing interest in having a built-in dark-mode setting for Zotero.
  • Yes that'd be great to have this feature !

    In the meantime I tried to use the script Pedro Rosmaninho nicely shared, unfortunately I put it in the zotero profile folder and it didn't change a thing. If someone could explain where to put it or if I need something else I'd be very grateful :)
Sign In or Register to comment.