Night theme for Zotero UI and PDF

  • By Thomas F. K. Jorna
  • Last update: Jan 9, 2023
  • Comments: 17

🌌 Night for Zotero

Install by downloading the latest version

Night theme for Zotero UI & Pdf

Also adds some animations and other UI changes.

Based on the Nord colorscheme and prior work by Rosmaninho.

✨ Features

◼️ Dark UI

Easier on the eyes for those late night deadlines.

🌚 Dark-mode for PDF

It's 2022, we can change the colors of PDFs. Choice between two themes: a very dark one, and one that matches the background color.

🔁 Quick Toggle

Quickly toggle between different filters for the pdf

Screen.Recording.2022-04-19.at.14.39.11.mov

🌊 Miscellaneous UI improvements

Clean up the tab bar, add some animations here and there, get rid of all the borders.

⬇️ Install

Download the xpi from Releases. As always, if you're on Firefox, right-click -> Save link as....

Video instructions

Screen.Recording.2022-05-12.at.10.52.56.mov

😢 Limitations

  • Popup menus do not have proper styling on some platforms.
  • currently using CSS filter functions in order to make the pdfs dark, however this is rather slow.

✅ To-do

  • Make prettier, more curves. Basically redesign zotero a bit
  • Add more themes
  • Add user preferences
  • Write contributing guide

💪 Contributing

You're help is very welcome! However, getting setup for Zotero plugin development is a bit of a pain in the ass.

What you need to do

  • Download Zotero 60 ESR
  • Git clone
  • yarn
  • do the zotero plugin stuff (expound on this)
  • Launch zotero with --debugger and -somethingcaches
  • Launch Firefox 60
  • In Firefox, go to devtools, go to settings, click "enable remote debugging" and the one next to it that's also about debugging.
  • In Zotero, go to setting, advanced, config editor, look up "debugging" and click on "allow remote debugging"
  • In Firefox, click the hamburger menu in the top right -> web developer -> Connect...
  • Enter localhost:6100
  • Connect
  • Click "Inspect Main Process"

Wow now you can finally do things.

Github

https://github.com/ThomasFKJorna/zotero-night

Comments(17)

  • 1

    Can not see Tags and Toolbar clearly.

    As title. Something maybe worth mentioning is that I changed the font size in Zotero.

    OS Platform: Win11 21H2 Zotero Version: 6.0.4 zotero-night: 0.2.1

    Screenshots: w/o zotero-night: image

    w/ zotero-night: image

  • 2

    Dark mode/filter doesn't work for PDF reader any more (macOS 12.5)

    First of all, thank you very much for your hard work!

    Unfortunately, I have to report a potential bug. Since 4.10 the dark mode/filter for the PDF reader doesn't seem to work any more. Additionally, it appears that the dark mode and filter setting is lost after each app restart or quit.

    Option for PDF filter is also missing: Screenshot 2022-07-31 at 15 42 40 Screenshot 2022-07-31 at 15 44 50

    • Zotero version: 6.0.10
    • OS version: macOS Monterey (12.5)
    • Plug-in version: > 4.8

    Do you need any further information, please let me know?

    Kind regards

  • 3

    [Bug] When pressing the Control key (Windows), the collections containing an item do not highlight.

    In the main Zotero Tab (library), in night view, when pressing the Control key (Windows), the collections containing an item do not highlight. Zotero: 6.0.7 Zotero-night plugin: 0.4.8

  • 4

    [BUG] Plugin seems to not save preferences correctly

    Description

    The plugin seemed to be forgetting the dark mode setting on restart, after some investigation, it seems to never be set in the first place!

    Steps to Reproduce

    • Go to Tools -> Night Preferences
    • Click Enable Dark Theme
    • Click Ok
    • Go to Tools -> Night Preferences again
    • See that Enable Dark Theme is not ticked any more

    Expected behavior

    Plugin should remember the setting when it is set.

    Screenshots

    Screenshot showing the dark moded interface with dark mode apparently not enabled (this is just after setting it to enabled, clicking ok and then opening the settings again). Also shows the preferences config editor with no preference set for dark mode (seems like the pdf viewer is set though?) night

    OS

    Windows 10 (From the settings:) Edition Windows 10 Home Version 21H1 Installed on ‎11/‎10/‎2020 OS build 19043.1706 Experience Windows Feature Experience Pack 120.2212.4170.0

    Zotero Night Version

    0.4.16, latest release

  • 5

    [BUG] lack of color integrity

    Describe the bug A clear and concise description of what the bug is.

    there are a couple of theme bugs and hard to read dark font on the dark theme

    Screenshots If applicable, add screenshots to help explain your pr Screen Shot 2022-09-30 at 11 37 00 Screen Shot 2022-09-30 at 11 47 33 Screen Shot 2022-09-30 at 11 50 08

    oblem.

    OS (macOS XX.xx [specify Intel or Silicon], Windows, Linux [specify distro/package type]: intel-based Macbook pro 13" 2020 model. I am using macOS Monterey 12.6 Zotero Night version (please check that you are on the latest version) I am using Zotero 6.0.14 Additional context Add any other context about the problem here.

  • 6

    Pdf dark mode does not work for right-most pdf

    Hello @ThomasFKJorna , thank you so much! This is so great!

    Little issue here, I cannot seem to get it working for the PDF itself. The UI gets dark, althought I cannot change from the two settings (Dark or Matching background), and I cannot change it back to day mode. I have to disable it to do so. The PDFs don't appear to react to the plugin.

    Specs

    MacOS Monterey 12.0.1 Zotero 6.0.5-beta.5 Zotero Night 0.1.1 (Latest).

    Some screenshots.

    The plugin works fine for the UI: Captura de pantalla 2022-04-19 a las 16 36 27

    But doesn't work for the PDF's themselves: Captura de pantalla 2022-04-19 a las 16 36 33

    And the preferences don't seem to respond either: Captura de pantalla 2022-04-19 a las 16 40 03 Captura de pantalla 2022-04-19 a las 16 40 09

  • 7

    Option to swith the main pdf background to white.

    Would it be possible to just swith the main pdf background to white while maintaining the side panels in the night theme? Some of the pictures blend in too well with the dark background.

  • 8

    [FEAT] Math support in notes

    Zotero has recently added in the beta an option to add math equations: https://forums.zotero.org/discussion/99411/available-for-beta-testing-math-support-in-notes However, they do not display correctly with this plugin. Is it possible to support also the math equations?

  • 9

    [BUG] Dark filter not working in pdf reader

    Describe the bug The UI gets dark but pdf won't

    To Reproduce Steps to reproduce the behavior:

    1. Install the plugin
    2. Restart Zotero
    3. Go to tools-night preferences
    4. Enable dark theme and choose dark or matching background

    Expected behavior Both UI and Pdf get dark

    Screenshots image P.S In this picture I went to night preference the second time after pdf reader had fail to go dark. And I discovered that the "Enable dark theme" tickbox still stayed not selected. Should this probably be to do with the problem?

    OS (MacOS XX.xx [specify Intel or Silicon], Windows, Linux [specify distro/package type]: Windows

    Zotero Night version (please check that you are on the latest version) 0.4.16

  • 10

    Zotero Night dissappears after closing and opening Zotero on MacOS

    night for Zotero doesnt get along with version 6.0.6.
    every time i minomize the app and turn up, the UI turn into day mode. its normal after i re-install the add-on. macine -Mac

  • 11

    Highlighting collections containing an item feature broken

    As mentioned in this post: https://www.zotero.org/support/kb/collections_containing_an_item Zotero allows you to highlight the collections containing an item by holding down the OPT key (macOS), CTRL key (Windows), or ALT key (Linux).

    Unfortunately, it seems that the extension as is overnights the background color of the highlighted elements.

    The dark mode toggle button fortunately allows the simple workaround of disabling the dark mode to find the element, but the experience could be even better!

    Thank you for the great work anyway :D

  • 12

    [BUG] Notes cannot switch to bright mode.

    Describe the bug Notes cannot switch to bright mode.

    Screenshots zotero_aInzOkbkmJ

    OS (MacOS XX.xx [specify Intel or Silicon], Windows, Linux [specify distro/package type]: Win11 and MacOS 13.1

  • 13

    [BUG] Selected area in the sidebar is still white

    Describe the bug Selected area in the sidebar is still white.

    To Reproduce Steps to reproduce the behavior:

    1. Open a pdf file in built-in pdf viewer.
    2. Click on 'Select Area' and drag an area.
    3. Click on 'Toggle Sidebar' and select 'Show Annotations'
    4. See error

    Expected behavior The selected area should be in dark mode as the same as highlighted text.

    Screenshots screenshot-20221209-111646

    Win11 21H2 22000.1281

    Zotero Night version 0.4.20

    Zotero version 6.0.18

  • 14

    [BUG] wrong "info" tab displayed

    Describe the bug When some PDFs are already open for reading, opening a new PDF in the viewer doesn't display correct "Info" tab. Rather, the "Info" tab displayed is for one of the already currently open PDFs.

    To Reproduce Steps to reproduce the behavior:

    1. Open a PDF in the viewer
    2. Return to the library and open another PDF
    3. The "info" tab displayed is for the previous PDF and not for the PDF currently displayed in the viewer.

    Expected behavior PDF in the viewer and "info" tab correspond to the same Zotero item.

    Screenshots image

    OS: Mac OS 12.6

    Zotero Night version 6.0.19-beta.6+3d8bbb3e5

  • 15

    [BUG] Dark mode select area

    When in dark mode, in the built in pdf viewer, when selecting an area to annotate (during click and drag), the selection box is invisible. After you let go, the box is there.

    Using the annotation mode second from the right: image

    I'm running the latest version (0.4.20) of Zotero Night and Zotero version 6.0.18, on Linux Mint 21 Xfce.

  • 16

    [BUG] Font color of code block in notes is black

    Describe the bug Font color of code block in notes is black

    To Reproduce Steps to reproduce the behavior:

    1. Create a new note
    2. Type ``` to insert a code block
    3. Type something

    Expected behavior The font color in the code block should be white.

    Screenshots screenshot-20221207-214352 As shown above, the code is hardly readable.

    Windows 11 21H2 22000.1281

    Zotero Night version 0.4.20

    Zotero version 6.0.18

  • 17

    [BUG] Distance between Items of the menu bar are scaled down in dark mode

    Describe the bug Distance between Items of the menu bar are scaled down in dark mode, which look strange and is not user-friendly.

    To Reproduce Steps to reproduce the behavior:

    1. Enable zotero-night
    2. Click on any menu bar
    3. See error

    Expected behavior The distance between Items of the menu bar in dark mode should be same of light mode.

    Screenshots

    • menu bar in dark mode menu-bar-dark

    • menu bar in light mode menu-bar-light

    OS (MacOS XX.xx [specify Intel or Silicon], Windows, Linux [specify distro/package type]: Ubuntu 20.04

    Zotero Night version (please check that you are on the latest version) 0.4.19