Rosmaninho / Zotero-Dark-Theme

userChrome.css file for a Zotero dark theme. Suggestions for improvements are welcome.
GNU General Public License v3.0
721 stars 95 forks source link

Window decorations, menus and PDF window are still shiny white? #39

Open axolrotflotl opened 2 years ago

axolrotflotl commented 2 years ago

I've just added the latest version of the theme to my Flatpak install on Debian. Zotero version is 6.04.

Most of the UI is now dark, but menus and window/frame borders are still light. In the menu bar this is more than an aesthetic problem as the menu text items are shown in white on light background, see picture: 2022-04-02-130502_1366x768_scrot

Opening the PDF reader, the tab bar is nice and dark, but the entire reader UI is unchanged -- including the Note sidebar which I amended with the code snippet available in the repo.

These are probably unique to my setup, but I appreciate any advice on how to turn out the lights on Zotero entirely.

spaceb0b commented 2 years ago

Hi,

I've managed to fix it somehow on my system. I use the solarized dark theme for my system but you can just change the code to your liking. image

This is what I have in my userChrome.css file:

`/*:::::::::::::::::::::::::::::::::::::::::::::::::::: Zotero :::::::::::::::::::::::::::::::::::::::::::::::::::*/ * {border: 0 !important; } /*change background color and text color of zotero toolbar and menubar*/ #zotero-tb, #zotero-toolbar, #navigator-toolbox { background: #073642 !important; color: #FFFFFF !important; } #zotero-toolbar {border-bottom: 1px solid #1d1d1d !important;} .tabs {-moz-appearance: none !important; background: #002b36 !important; color: #FFFFFF !important; /*color: #000000 !important;*/ border: 0px solid red !important;} .tab {-moz-appearance: none !important; color: #7E7E7E !important; background: #002b36 !important; } .tab:hover { background: #7E7E7E !important; color: #FFFFFF !important; border: 0 !important; } } .tab:not(:focus){ -moz-appearance: none !important; color: #7E7E7E !important; background: #002b36 !important; border-top: 0px solid #0a84ff !important; border-left: 0px solid rgba(127,127,127,0.2) !important; border-right: 1px solid #1d1d1d !important; border-radius: 0px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } .tab.selected:not(.highlighted){ color: #FFFFFF !important; background: #073642 !important; border-top: 3px solid #0a84ff !important; border-left: 0px solid rgba(127,127,127,0.2) !important; border-right: 1px solid #1d1d1d !important; border-radius: 0px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; }`

It's just some hack 'n slash from various sources with some improvisation. I forgot which field does what but I guess you can deduce it by playing around with it or checking the colors.

axolrotflotl commented 2 years ago

@spaceb0b Looks promising, I'll hack away at it myself :) One thing though, is that all of your userChrome file, or just the menu/tab part?

spaceb0b commented 2 years ago

@axolrotflotl Yes that's my whole userChrome file. I think it only relates to the toolbar and the tabs actually. The menu bar inherited the colors from my Kubuntu global theme/colors I think, but I'm not sure. I also have two entries with "dark theme" enabled in the Zotero config, not sure if it's relevant

shjenkins94 commented 2 years ago

@axolrotflotl and @spaceb0b I think your global theme is what's changing the window and "File Edit View" part.

I'm not super well versed in CSS, but wrote this snippet of code that basically changes the borders, background, foreground, labels, etc. of everything to be extremely bright colors so you can see what can be changed:

* {
  background: #bd93f9 !important;
  color: #50fa7b !important;
  border: 2px solid #f55 !important;
  outline: 2px solid #f1fa8c;
}
* label {
  color: #ffb86c !important;
  background: #8be9fd !important;
}

Here's the regular library and pdf viewer: Screenshot from 2022-04-26 01-37-52 Screenshot from 2022-04-26 01-38-04

I could be wrong but it seems like you can't edit the PDF viewer and the top of the window using the CSS file (Otherwise they would be bright purple instead of white.)

kajdo commented 1 year ago

Hi Guys,

i just faced the same issue -- and thx to this article it now looks better :)

https://itsfoss.com/flatpak-app-apply-theme/

long story short - flatpak ignores your gtk theme (which you can set via lxappearance for example). with flatseal you can set it (just follow the instructions in itsfoss-article)

have fun - and thx 1000x to the author for this extremely nice theme