[BUG] lack of color integrity

[mnkhprre]

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

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.

[tefkah]

Thank you!

[mnkhprre]

Thank you!

you are welcome. if you make it efficient to use for academic purposes. I am thinking to use it on my MA thesis notes

[AlexMeier99]

Hi @tefkah @mnkhprre

after quite a while of seeing this project growing I tune in again to share some CSS to fix the bugs above:

/* toggle buttons top right in reader view */
[theme="dark"] #zotero-tb-toggle-item-pane, [theme="dark"] #zotero-tb-toggle-notes-pane{
  background: var(--nord1) !important;
}
[theme="dark"] #zotero-tb-toggle-item-pane span, [theme="dark"] #zotero-tb-toggle-notes-pane span {
  display: none;
}
[theme="dark"] #zotero-tb-split {
  background: var(--nord0) !important;
}

/* ------------------------------- */

/* 'deck' context notes pane */
[theme="dark"] #zotero-context-toolbar-extension,
[theme="dark"] .zotero-context-notes-list,
[theme="dark"] .notes-list-container {
  background: var(--nord0) !important;
  color: var(--nord5) !important;
}

/* search bar at the top of context notes pane */
[theme="dark"] .zotero-context-notes-list textbox[type="search"]{
  filter: var(--dark-filter);
}

/* '+' button */
[theme="dark"] .header-row button {
  background-color: var(--nord2) !important;
  color: var(--nord5) !important;
}

/* boxes/cards for notes 'rows' in context notes pane */
[theme="dark"] .note-row,
[theme="dark"] .more-row,
[theme="dark"] .note-row .inner .body-line .date{
  background-color: var(--nord2) !important;
  color: var(--nord5) !important;
}

/* ------------------------------- */

/* related items tab pane -> 'add' button */
[theme="dark"] .zotero-editpane-related #addButton {
  -moz-appearance: none !important;
  background-color: var(--nord2) !important;
  color: var(--nord5) !important;
}

/* --------------------------------- */

/* 'add' notes button in library view*/
[theme="dark"] #zotero-editpane-notes-add {
  -moz-appearance: none !important;
  background-color: var(--nord2) !important;
  color: var(--nord5) !important;
}

/* --------------------------------- */

/* new tag input in 'tags' tab pane */
[theme="dark"] .tag .editable.editing {
  filter: var(--dark-filter);
}

/* --------------------------------- */

/* dropdown icon button of 'author'/publisher data entry field in first context tab */
[theme="dark"] .creator-type-label image {
  filter: var(--dark-filter);
}

/* --------------------------------- */

.toolbar-button:hover {
    background-color: var(--nord3);
}

📁 userchrome.css -> please remove .txt extension required for upload.

I didn't expected this much interest when I shared my workflow for opening the zotero/firefox dev tools back in april. I'm very grateful that @tefkah developed this plugin. Please keep up the great work!

[AlexMeier99]

I couldn't fix the following bug so far:

The div lacks any sort of identifier (id, class, etc.). So styling might cause further bugs.

[AlexMeier99]

I've also experienced the following bug (before I started messing with the css):

For some reason the background of the note editor is dimmed as well. But as further styling (injected by js code) seems to be missing the rest of the editor keeps it's light theme.

I couldn't find a suiting event for the creation of the editor in the code. So styling it might be difficult.

[AlexMeier99]

Today I revisited the bug from my last comment again. When injecting the css retrieved from this plugin into #noteStyle the bug seems to be solved.

Line 328 in zotero-night.ts seems to be doing this. So far I don't understand why it does not seem to work.

Apparently the css for the hover state of the toolbar-buttons is either missing or not working. I'll add a possible replacement below:

.toolbar-button:hover {
    background-color: var(--nord3);
}

[mattiaTagliente]

Thanks @AlexMeier99 for your patch, I tested the .css and it works for me.
I will attach here the .css complete with your latest modification for the toolbar-buttons (remove the .txt extension before use).
To use it follow the following steps:
Go to your user Profile folder
Windows users: C:\Users\User_name\AppData\Roaming\Zotero\Zotero\Profiles\user_profile.default
Linux (Flatpak) users: ~/.zotero/zotero/XXXXXXXX.default/
Create a chrome folder
Place the userchrome.css file in there
Start Zotero and enjoy

[ct324]

Thanks @AlexMeier99 for your patch, I tested the .css and it works for me.
I will attach here the .css complete with your latest modification for the toolbar-buttons (remove the .txt extension before use).
To use it follow the following steps:
Go to your user Profile folder
Windows users: C:\Users\User_name\AppData\Roaming\Zotero\Zotero\Profiles\user_profile.default
Linux (Flatpak) users: ~/.zotero/zotero/XXXXXXXX.default/
Create a chrome folder
Place the userchrome.css file in there
Start Zotero and enjoy

How would I implement this fix on Mac?

[AlexMeier99]

Hi @mattiaTagliente I'm glad to learn that it worked for you. 👍 If you'd like to use the dev tools using a Zotero beta release yourself please see the workflow I described in Rosmaninho/Zotero-Dark-Theme#32.

@ct324 unfortunately I have no Mac OS device at my disposal. A quick google search returned the following results:

/Users/<username>/Zotero should be the path of your zotero data directory. source: https://www.zotero.org/support/zotero_data -> you'll need the profile directory

/Users/<username>/Library/Application Support/Zotero/Profiles/<randomstring> should be the path of your zotero profile directory. source: https://www.zotero.org/support/kb/profile_directory -> please use this directory to create the chrome folder and paste the userChrome.css file there

You might be using Firefox on your device as well. As Zotero is based on a old Firefox version you could also follow the tutorials available for using a userChrome.css file with Firefox.

[MaximumX]

@AlexMeier99 @mattiaTagliente Thank you for your update, I trid and it also works for me.

[tefkah]

Lot of these should be fixed, thank you so much @AlexMeier99, couldnt have done it without your help!

Would you be maybe interested in helping maintain zotero-night? If so send me an email!