Hello. In Windows the menubar shows with a white background:

When I begin highlighting a word, the highlight consistently begins a letter or two to the left and slightly above where my cursor is, so that it frequently highlights the line above where I'm clicking. Happens no matter what pdf I'm reading. When I disable the Night plugin and restart, this doesn't happen. Anything I can do to fix? Thanks!

It seems to cause icon dislocation.

After installation, there may be such a display error in light mode. Night mode is great！

Cheers.

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

图标有点小，不好找

The theme is not applied when the PDF reader is opened in a new window... No matter if the PDF is opened directly from the Zotero DB tab or from an already opened tab.

under the night mode, when select an entry and press "shift" simutaneously,The location of the folder where the document is located cannot be highlighted

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:

w/ zotero-night:

If I highlight a sentence in the pdf reader and then add a comment to the highlight with the annotation pane closed, the text is black on dark background while editing. Once I click out of editing, it is black on white background and much more legible.

Thank you for your project. Can you add the PDF eye protection mode of this project for reference? I feel the color theme is more comfortable, and the existing white font is somewhat dazzling
https://github.com/q77190858/zotero-pdf-background

I'm hoping to edit the theme or create a new one more like my personal style and to share! However, I can't figure out how to be able to edit/see changes — I saw that writing a contributing guide is on the to-do. Has anyone figured it out yet, regardless of OS?

I reported these issues on #15, but maybe it should be done in a new thread... so, here it is:

I think I am having the same problem on Windows.

On Zotero, I run the command to update the plugins (via Tools>Add-ons) and the main DB Tab turns to day mode (PDF tabs seem to work fine) and the theme toggle in the upper right corner disappeared. I have to restart the computer to bring back the dark mode. Moreover, the add-ons windows does not appear. It also seems to block the Better BibTex:

Also, here in github it appears that the latest version is 0.2.5, but I can't update the plugin from 0.2.2.

Hi!
When opening PDF tab in new windows the black theme is not applied.
Thanks!

Description:
When I open a new PDF file for the first time, the content of the information bar on the right will not be updated. I need to switch back and forth with other tabs to update.

Environment

• OS:macOS
• Zotero Version(6.0.7)
• Addon Version(0.4.8)
  

When I switch from night mode to day mode, the background colour of the current pdf is white, but the background colour of some other pdfs and newly opened pdfs is still black, I hope to fix these bugs as soon as possible, when I switch to day mode, I want all visible pdfs to be in day mode.Look at this image, the sign is clearly the sun, but it is in a night state.Obviously in the main screen of zotero I am in day mode, but when I enter the pdf I am in night mode (at this point the pdf still shows a little sun)

Originally posted by @heyeruoqi in #14

I have the Default PDF filter set to "none", but nevertheless, when I open a PDF, it defaults to the dark filter. In the PDF reader toolbar, the toggle for filters defaults to the "sun" symbol, correctly, but the actual filter applied is the dark filter.

To get the "none" setting, I have to use the toolbar toggle to cycle through the options back to "none"/ the sun symbol, at which point I will finally have no filter applied.

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:

• 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

Thanks for this great tool. This has really saved my eyes at night! It will be great if we could have Sephia mode for easy reading during the day!

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.

Zotero Better Notes

Zotero PDF Translate

Whilst the addon is enabled in any theme colour the Select Area feature doesn't show the coloured preview box.

Zotero 6.0.7 Linux Flatpak
Night for Zotero 0.4.8

See video

The add-on of 'Zotero PDF Translate' is useful, but the panel can't be dark under the add-on of 'zotero- night'.

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

The background of the 4 tabs(info notes tags related) is white, and can't be seen clearly.

And when my mouse pointing to a tag it can be highlighted properly， but when it is selected there is no highlight！I can't tell if the tag is selected or not.

I'm using Zotero 6 on windows 11.

Drawing an are in the pdf view is slightly buggy. The drawing functionality still works as expected, however, while I draw an rectangle not visual feedback is given. This means that I don't see the border of the currently drawn rectangle. Only after I release the left mouse button the rectangle is correctly drawn.

I'm using WIndows 10 with the newest version of Zotero (6.0.10) and of this plugin (0.4.15)

So plugin development just in general is always such a PITA for sharing dev environments between devs. It really messes up the possibility of getting contributions. I experience this myself, and hell even knowing my way around all of this I don't want to do it 99% of the time even if I feel motivated to contribute.

So what about the most minimal dev environment I could setup for this in an actual VM that could be loaded up with virtualbox? I think I can get the actual image quite small and then allow for a user specified amount of attachable storage.

Looking for any feedback/concerns. Obviously hosting ISOs somewhere can be a problem.

if we do not open any pdf files, just open a note-file on the main-interface of zotero, the note-file can display in dark mode.

but if we open a pdf file, and open note-file on the right side of pdf, the note will not display in dark mode

Hello, Can you add the ability to customize the PDF background color in Night Preferences, Reading PDF papers on a green background during the day is something to protect our eyes，just like this：

by hte way，
when I used this theme to read the paper, the color of the picture in the paper was distorted, as follows：

The actual picture looks like this：

Best wishes

Here is what I see when running the plugin.

Every other source is not darkened. The top bar is not darkened.

Ubuntu 20.04.4

I think this is the cause of #37, #40 (on Linux), and #31. I also made a post on the Zotero forum

Basically I noticed that the parts of Zotero's UI that don't darken on Linux change if you change the GTK theme for applications.
Here's a screenshot to show what I mean:

This is Zotero in nightmode, and the GTK theme for applications is set to Gruvbox. You can see that the scrollbars, the top part of the window, and the menu items with checkboxes are all sepia-ish.

I tried messing around with the GTK theme (which also uses CSS) and zotero-night and my (not super knowledgeable) findings are:

1. Neither zotero-night nor GTK can reach everything in Zotero's GUI. zotero-night can't get to the parts that I pointed out in the above screenshot, and GTK can't get the tabs or the PDF reader.
2. If you take out the parts of the GTK theme that affect Zotero's GUI it looks awful.
3. Taking out some of the the CSS code from zotero-night and applying a matching GTK theme would result in a completely themed Zotero on Linux.
   Like this: zotero-night over a Nordic GTK theme
   

I'm not sure what to do about all this. It would be great if the parts controlled by GTK could somehow be put into the .xpi theme.

There seems to be no change on the right side of the menu bar

The add-in works amazingly. Thank you. Is it possible to do anything about the scrollbar color? I am on Mac OS, but looking at screenshots on other OSs the scrollbars also don't appear dark.

zotero-night scrollbars:

firefox scrollbars, for comparison:

Zotero 6.06
Night for Zotero 0.2.2
MacOS Monterey 12.3.1
macbook air m1

Steps to reproduce：

1. open zotero
2. close the zotero window (not quit)
3. reopen zotero window
4. night mode disappers

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:

But doesn't work for the PDF's themselves:

And the preferences don't seem to respond either:

Make actual icons instead of emoji

https://github.com/ThomasFKJorna/zotero-night/blob/27d8548beb34ff8ddc0c6a5dfe27eb33a521cdd8/content/zotero-night.ts#L327

      this._tabsAdded = true
    }
  }

  public getTabWindowById(id: string): Window | null {
    const tabIndex = Zotero_Tabs._tabs.findIndex((tab) => tab.id === id)

    debug(`Select tab event tabindex: ${tabIndex}`)

    if (tabIndex === -1) return null

    const activeTabWindow = window[1 + tabIndex]
    return activeTabWindow
  }

  public getTabNameById(id: string): string {
    const name =
      (Zotero_Tabs._tabs.find((tab) => tab.id === id)?.title as string) ??
      'Not found'
    return name
  }

  private addEverythingForTab(tabWindow: Window) {
    const doc = tabWindow.document
    // if (doc.querySelector('#pageStyle')) return

    debug('adding style for added window tab')
    const style = doc.createElement('style')
    style.setAttribute('id', 'pageStyle')
    style.textContent = css
    const header = doc.querySelector('head')
    header.appendChild(style)
    doc.querySelector('html[dir]').setAttribute('theme', 'dark')
    this.addToggleButton(tabWindow)

    //  this.editorNeedsStyle() && this.tryToAddStyleToEditor()
  }

  public toggleDarkTheme(on?: boolean) {
    const main = window.document.querySelector('#main-window')
    if (on) {
      main.setAttribute('theme', 'dark')
      this.setHTMLThemeAttribute(true)
      !this.getPref('enabled') && this.setPref('enabled', true)
      return
    }

    if (main.getAttribute('theme') === 'dark' || on === false) {
      main.removeAttribute('theme')
      this.setHTMLThemeAttribute(false)
      this.getPref('enabled') && this.setPref('enabled', false)
      return
    }
    main.setAttribute('theme', 'dark')
    this.setHTMLThemeAttribute(true)
    !this.getPref('enabled') && this.setPref('enabled', true)
  }

  public addGlobalToggleButton() {
    const toolbar = window.document.querySelector('#zotero-item-toolbar')
    const button = window.document.createElement('div')
    button.setAttribute('id', 'night-global-toggle')
    button.setAttribute('tab-index', '0')
    // TODO: Make actual icons instead of emoji

    const image = window.document.createElement('span')
    image.textContent = this.getPref('enabled') ? '🌚' : '🌞'
    button.appendChild(image)
    button.onclick = () => {
      this.toggleDarkTheme()
      image.textContent = this.getPref('enabled') ? '🌚' : '🌞'
    }

    toolbar.appendChild(button)
  }
  // eslint-disable-next-line @typescript-eslint/require-await
  public async load(globals: Record<string, any>) {
    this.globals = globals

929096ae0b7bc0a0a1ab205498c779cfaf4bb0d0

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

Hey,

This plugin is very useful! Thanks for your great job!

My problem is that when I open Zotero, the default display is dark mode, and even if I manually switch to light mode, the next time I restart Zotero, it changes to dark mode again. (btw, I found the dark mode for PDF is not consist with the mode for UI; when I changed UI to light mode, the PDF still remained in dark mode.) Is it possible to keep the settings after a restart, i.e., keep the last mode I choose?

Moreover, could you please consider adding a feature to switch the night mode automatically? I use AutoDarkMode to manage my system display mode. I believe it would be more beneficial for Zotero Night to add a feature to follow the system settings or switch automatically at regular intervals.

Best wishes!

Normally, holding down control (crtl) in Zotero for Windows would highlight all the collections that the currently selected entry/article is in.

However, when Night for Zotero is enabled, nothing is highlighted, so it is not possible to tell which collections an entry is in.

Figure out some way to remember per window setting

https://github.com/ThomasFKJorna/zotero-night/blob/c68e39357ff34d62ea3cdb9b12f7e1dc8600cf1e/content/zotero-night.ts#L101

  private globals: Record<string, any>
  private strings: any
  private _tabsAdded: boolean
  public _nordFilter: string
  public _darkFilter: string
  public _sepiaFilter: string

  constructor() {
    this._nordFilter =
      'invert(81%) sepia(23%) saturate(459%) hue-rotate(181deg) brightness(90%) contrast(93%)'

    this._darkFilter =
      'brightness(0.91) grayscale(0.15) invert(0.95) sepia(0.65) hue-rotate(180deg)'
  }

  /**
   * Open the preference window for Night
   */
  public openPreferenceWindow(paneID: any, action: any) {
    const io = {
      pane: paneID,
      action,
    }
    // @ts-expect-error
    window.openDialog(
      'chrome://zotero-night/content/options.xul',
      'night-options',
      `chrome,titlebar,toolbar,centerscreen${Zotero.Prefs.get(
        'browser.preferences.instantApply',
        true
      )}`
        ? 'dialog=no'
        : 'modal',
      io
    )
  }

  public getPref(pref: string) {
    return Zotero.Prefs.get(`extensions.night.${pref}`, true) as string
  }

  public setPref(pref: string, value: any) {
    return Zotero.Prefs.set(`extensions.night.${pref}`, value, true) as string
  }

  private hasToggle(readerWindow: Window): boolean {
    return !!readerWindow.document.querySelector('#night-toggle')
  }
  private hasFilter(readerWindow: Window): boolean {
    return !!readerWindow.document.querySelector('#filter-style')
  }

  private createFilterStyle(readerWindow: Window, nextStyle: string) {
    const filterStyle = readerWindow.document.createElement('style')
    const filter = nextStyle === 'match' ? this._nordFilter : this._darkFilter
    filterStyle.setAttribute('id', 'filter-style')
    filterStyle.textContent = `[theme='dark'] #viewer .page .canvasWrapper { filter:  ${filter} }`
    return filterStyle
  }

  // TODO: Just change the textcontents of the style, don't remove and append it constantly
  public toggleOnClick(readerWindow: Window, nextStyle: string) {
    if (this.hasFilter(readerWindow)) {
      readerWindow.document.querySelector('#filter-style').remove()
    }
    if (nextStyle === 'none') return

    const filterStyle = this.createFilterStyle(readerWindow, nextStyle)
    readerWindow.document.head.appendChild(filterStyle)
    return
  }

  // TODO: Figure out some way to remember per window setting
  private addToggleButton(readerWindow: Window) {
    if (this.hasToggle(readerWindow)) return

    const toggle: HTMLButtonElement =
      readerWindow.document.createElement('button')

    toggle.setAttribute('id', 'night-toggle')
    const defaultFilter = this.getPref('default_pdf')

    toggle.setAttribute('data:filter', defaultFilter)
    const icon =
      defaultFilter === 'match' ? '✨' : defaultFilter === 'dark' ? '🌙' : '☀️'
    toggle.textContent = icon
    toggle.setAttribute(
      'style',
      'filter:none !important; height: 20px; width: 20px'
    )
    toggle.onclick = () => {
      const filter = toggle.getAttribute('data:filter')
      const nextStyle =
        filter === 'none' ? 'match' : filter === 'match' ? 'dark' : 'none'

      const icon = filter === 'none' ? '✨' : filter === 'match' ? '🌙' : '☀️'

      toggle.textContent = icon
      this.toggleOnClick(readerWindow, nextStyle)
      toggle.setAttribute('data:filter', nextStyle)
    }

    const middleToolbar = readerWindow.document.querySelector(
      '#toolbarViewerMiddle'
    )
    middleToolbar.appendChild(toggle)

    const st = this.createFilterStyle(readerWindow, defaultFilter)
    readerWindow.document.head.appendChild(st)
  }

  public addStyleToEditor(editorWindow: Window) {
    const editorDoc = editorWindow.document
    const style = editorDoc.createElement('style')
    style.setAttribute('id', 'noteStyle')

4b040c63bd9ed47d5be525820f977432411d1d71

Top menu bar looks like this:

Otherwise seems fine. Using Linux Flatpak version.

Great plugin by the way, thanks for saving my eyes.

Just change the textcontents of the style, don't remove and append it constantly

https://github.com/ThomasFKJorna/zotero-night/blob/c68e39357ff34d62ea3cdb9b12f7e1dc8600cf1e/content/zotero-night.ts#L89

  private globals: Record<string, any>
  private strings: any
  private _tabsAdded: boolean
  public _nordFilter: string
  public _darkFilter: string
  public _sepiaFilter: string

  constructor() {
    this._nordFilter =
      'invert(81%) sepia(23%) saturate(459%) hue-rotate(181deg) brightness(90%) contrast(93%)'

    this._darkFilter =
      'brightness(0.91) grayscale(0.15) invert(0.95) sepia(0.65) hue-rotate(180deg)'
  }

  /**
   * Open the preference window for Night
   */
  public openPreferenceWindow(paneID: any, action: any) {
    const io = {
      pane: paneID,
      action,
    }
    // @ts-expect-error
    window.openDialog(
      'chrome://zotero-night/content/options.xul',
      'night-options',
      `chrome,titlebar,toolbar,centerscreen${Zotero.Prefs.get(
        'browser.preferences.instantApply',
        true
      )}`
        ? 'dialog=no'
        : 'modal',
      io
    )
  }

  public getPref(pref: string) {
    return Zotero.Prefs.get(`extensions.night.${pref}`, true) as string
  }

  public setPref(pref: string, value: any) {
    return Zotero.Prefs.set(`extensions.night.${pref}`, value, true) as string
  }

  private hasToggle(readerWindow: Window): boolean {
    return !!readerWindow.document.querySelector('#night-toggle')
  }
  private hasFilter(readerWindow: Window): boolean {
    return !!readerWindow.document.querySelector('#filter-style')
  }

  private createFilterStyle(readerWindow: Window, nextStyle: string) {
    const filterStyle = readerWindow.document.createElement('style')
    const filter = nextStyle === 'match' ? this._nordFilter : this._darkFilter
    filterStyle.setAttribute('id', 'filter-style')
    filterStyle.textContent = `[theme='dark'] #viewer .page .canvasWrapper { filter:  ${filter} }`
    return filterStyle
  }

  // TODO: Just change the textcontents of the style, don't remove and append it constantly
  public toggleOnClick(readerWindow: Window, nextStyle: string) {
    if (this.hasFilter(readerWindow)) {
      readerWindow.document.querySelector('#filter-style').remove()
    }
    if (nextStyle === 'none') return

    const filterStyle = this.createFilterStyle(readerWindow, nextStyle)
    readerWindow.document.head.appendChild(filterStyle)
    return
  }

  // TODO: Figure out some way to remember per window setting
  private addToggleButton(readerWindow: Window) {
    if (this.hasToggle(readerWindow)) return

    const toggle: HTMLButtonElement =
      readerWindow.document.createElement('button')

    toggle.setAttribute('id', 'night-toggle')
    const defaultFilter = this.getPref('default_pdf')

    toggle.setAttribute('data:filter', defaultFilter)
    const icon =
      defaultFilter === 'match' ? '✨' : defaultFilter === 'dark' ? '🌙' : '☀️'
    toggle.textContent = icon
    toggle.setAttribute(
      'style',
      'filter:none !important; height: 20px; width: 20px'
    )
    toggle.onclick = () => {
      const filter = toggle.getAttribute('data:filter')
      const nextStyle =
        filter === 'none' ? 'match' : filter === 'match' ? 'dark' : 'none'

      const icon = filter === 'none' ? '✨' : filter === 'match' ? '🌙' : '☀️'

      toggle.textContent = icon
      this.toggleOnClick(readerWindow, nextStyle)
      toggle.setAttribute('data:filter', nextStyle)
    }

    const middleToolbar = readerWindow.document.querySelector(
      '#toolbarViewerMiddle'
    )
    middleToolbar.appendChild(toggle)

    const st = this.createFilterStyle(readerWindow, defaultFilter)
    readerWindow.document.head.appendChild(st)
  }

  public addStyleToEditor(editorWindow: Window) {
    const editorDoc = editorWindow.document
    const style = editorDoc.createElement('style')
    style.setAttribute('id', 'noteStyle')

09440a9f90afcdd7630a41b12c559929321ed620

Hello, I've been messing around with the UserChrome.css file for the other dark zotero theme, and I was hoping to add some of the changes I made to it to this repo (not very experienced with CSS but I think I was able to figure out how to change the background of the "File Edit View Tools" menubar.)

I was able to get a development copy of the repo going but I'm having trouble figuring out which css files are actually used in the plugin. It seems like some don't do anything.

Which files should I edit to change the theme?

Hi there,

I love this Zotero Night! Thanks for your excellent code.

Before I found this plugin, I was planning to develop the same one. So fast!

As this plugin is mature and wonderful, I'll stop my development and am willing to share my codes with you, if you think it would help.

My code is mainly about customizing themes, including a Preference UI, ugly though, and a CSS generator.

I see the supporting more themes in the TODO. If you think this custom theme feature is planned, we can merge/add our code to this repo in a proper way.

😁👍