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

z8080
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!
  • thepolice
    Agreed; definitely an improvement - just some simple kind of basic theming would be wonderful.
  • michaelanthonyabril
    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.
  • z8080
    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.
  • michaelanthonyabril
    @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.
  • shunryu
    Just want to add my two cents: a dark mode / night mode feature would be awesome! Would really help us late-night grad students :)
  • Mark.E
    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
  • nama_zucc
    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?
  • 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.

  • Pedro Rosmaninho
    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.
  • Pedro Rosmaninho
    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; }
  • Pedro Rosmaninho
    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.
  • usafbeach
    Just another user expressing interest in having a built-in dark-mode setting for Zotero.
  • cmartinache
    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 :)
  • Tyhill15
    Go to C:\Users\*your name*\AppData\Roaming\Zotero\Zotero\Profiles\*blahblah*.default, create a new folder called Chrome and in that folder create a file named userchrome.css, and copy and past the script into that file, then restart zotero.
  • sypianski
    Just another user expressing interest in having a built-in dark-mode setting for Zotero.
  • henriquemaia
    Same here. Having a way to achieve a consistent Zotero dark theme is something I would really like to have as a feature.
  • arindramishra
    Yes, a dark theme would be highly appreciated. I tried to create the userchrome.css with the code but it did not work.
  • heurrevex
    same here, very interested :D
  • z8080
    and upping my own suggestion one year later - still a very much needed feature, I feel, and one which most good softwares are beginning to offer as an option :)
  • bwiernik
    The Zotero developers are well-aware of the interest in a Dark Theme. It's not currently technically possible with the development platform that Zotero is built on, but it will be likely be possible when Zotero moves to a different development platform, hopefully later this year.
  • manouchk
    This would definitevely be a must have and even more now that the French Agency for health and safety reported that blue light of LED of screens are increasing probability to have macular degeneration. Having a dark theme reduces number of blue photons.
  • dstillman
    As bwiernik says, we're well aware of the demand here, and a dark mode is planned as soon as it's technically feasible, so I'm going to close this thread now. We'll update it when there's something new to share.
This discussion has been closed.