search

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

Help to tailor theme for MacOS #1

Closed Rosmaninho closed 3 years ago

Rosmaninho commented 4 years ago

Look at .css files in zotero\chrome\content\zotero-platform\mac after performing steps to unzip zotero.jar

2 - Copy the zotero.jar folder to another folder;

3 - Use 7zip to unzip zotero.jar to a zotero folder;

4 - Go to D:\X\zotero\chrome\skin\default\zotero;

5 - Look at ALL .css files in this folder;

6 - Start testing different pieces of code to change the defaults in the userchrome.css file.

Rosmaninho commented 3 years ago

zotero\chrome\content\zotero-platform\mac\zotero.css

.zotero-advanced-options > .zotero-advanced-options-label > dropmarker {
    transform: rotate(270deg) translateX(4px);
}

.zotero-advanced-options[state="open"] > .zotero-advanced-options-label > dropmarker {
    transform: translateX(4px);
}
Rosmaninho commented 3 years ago

*\zotero\chrome\content\zotero-platform\mac\overlay.css


/* Force use of Lucida for HTML input elements (e.g., Editable) */
input {
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, -apple-system, sans-serif !important;
}

#zotero-items-toolbar[state=collapsed]
{
    margin-left: -8px !important;
}

#zotero-pane toolbarseparator {
    margin-left: 7px;
}

#zotero-tb-sync-stop .toolbarbutton-icon,
#zotero-tb-sync-error .toolbarbutton-icon {
    width: 16px;
}

.zotero-tb-button > .toolbarbutton-icon {
    max-width: 31px;
}

.zotero-tb-button,
.zotero-tb-button:first-child,
.zotero-tb-button:last-child {
  -moz-margin-start: 0 !important;
  -moz-margin-end: 3px !important;
  -moz-padding-end: 10px !important;
  background: url("chrome://zotero/skin/mac/menubutton-end.png") right center/auto 24px no-repeat;
}

.zotero-tb-button[type=menu] {
    -moz-padding-end: 8px !important;
}

.zotero-tb-button > .toolbarbutton-icon {
    background: url("chrome://zotero/skin/mac/menubutton-start.png") left center/auto 24px no-repeat;
    padding: 4px 4px 4px 11px;
}

/* For menu buttons, decrease left padding by 1px */
.zotero-tb-button[type=menu] > .toolbarbutton-icon {
    -moz-padding-start: 9px;
    max-width: 29px;
}

#zotero-collections-toolbar {
    padding-left: 0;
}

.zotero-tb-button:-moz-window-inactive {
    opacity: 0.5;
}

.zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon {
    background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window.png") left center/auto 24px no-repeat;
}

/* Use a darker background when inactive so the button itself doesn't get too dark at 50% */
.zotero-tb-button:-moz-window-inactive,
.zotero-tb-button:-moz-window-inactive:first-child,
.zotero-tb-button:-moz-window-inactive:last-child {
    background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window.png") right center/auto 24px no-repeat;
}

.zotero-tb-button[open="true"],
.zotero-tb-button:not([disabled="true"]):hover:active {
  background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center/auto 24px no-repeat;
}

.zotero-tb-button > menupopup {
  -moz-margin-start: 2px;
  margin-top: -4px;
}

#zotero-tb-search-menu-button {
    margin: -6px 0 -6px -16px;
    padding: 6px 0 6px 15px;
}

#zotero-tb-sync > .toolbarbutton-icon {
  -moz-padding-start: 8px;
  padding-top: 1px;
}

#zotero-tb-sync-error[error=true]
{
    margin-bottom: 2px;
}

.zotero-tb-button[open="true"] > .toolbarbutton-icon,
.zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon {
  background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center/auto 24px no-repeat;
}

.zotero-tb-button > .toolbarbutton-text {
  display:  none;
}

#zotero-tb-sync > .toolbarbutton-icon {
    -moz-binding: none !important;
    padding: 2px 0px 2px 8px !important;
}

#zotero-tb-sync {
    margin: 0;
}

#zotero-view-tabbox {
    background-color: #fff;
    padding: 0;
}

#zotero-item-pane-content .groupbox-body {
    -moz-appearance: none;
    background-color: #ffffff;
}

#zotero-item-pane-message-box description {
    color: #7f7f7f;
}

#zotero-view-tabbox > tabpanels {
    margin: 12px 0 0 0;
    padding: 0;
    -moz-appearance: none;
}

#zotero-view-tabbox > tabs {
    -moz-appearance: none;
    background: -moz-linear-gradient(top, #ededed, #cccccc);
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #bdbdbd;
    padding: 2px 0 2px 0;
}

#zotero-view-tabbox > tabs > tab > hbox {
    padding: 0;
}

#zotero-view-tabbox > tabs > tab > hbox > .tab-icon {
    display: none;
}

#zotero-pane #zotero-view-tabbox > tabs > tab {
    -moz-box-orient: vertical;
    -moz-box-align: center;
    -moz-appearance: toolbarbutton;
    text-align: center;
    margin: 0;
    padding: 3px 1px 3px 1px;
}

#zotero-pane #zotero-view-tabbox > tabs > tab > hbox .tab-text {
    font-size: 11px;
    font-weight: bold;
    margin: 2px 7px 2px 9px !important;
    text-shadow: 0 1px rgba(255, 255, 255, .4);
}

/* This seems to be necessary to center the tabs. Not sure why. */
#zotero-pane #zotero-view-tabbox > tabs > tab:last-of-type > hbox .tab-text {
    margin: 2px 9px 2px 9px !important;
}

#zotero-pane #zotero-view-tabbox > tabs > tab[selected=true] > hbox .tab-text {
    color: #FFF !important;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
}

#zotero-collections-tree {
    -moz-appearance: none;
    border: none;
    margin: 0;
    padding: 0;
    min-height: 5.2em;
    background-color: #d2d8e2;
}

#zotero-collections-tree:-moz-window-inactive {
    background-color: rgb(232, 232, 232);
}

#zotero-collections-tree treechildren::-moz-tree-row {
    background-color: transparent;
    border-color: transparent;
}

#zotero-collections-tree treechildren::-moz-tree-cell(selected) {
    background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x;
    border-top: 1px solid #94A1C0;
}

#zotero-collections-tree:-moz-window-inactive treechildren::-moz-tree-cell(selected) {  
    background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x;
    border-top: 1px solid #979797;
}

#zotero-collections-tree treechildren::-moz-tree-cell(selected, focus) {  
  background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x;
  border-top: 1px solid #5382C5;
}

#zotero-collections-tree treechildren::-moz-tree-cell-text(selected) {  
  font-weight: bold !important;
  color: #ffffff !important;
}

#zotero-collections-tree treechildren::-moz-tree-twisty(selected) {
    list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}

#zotero-collections-tree treechildren::-moz-tree-twisty(selected, open) {
    list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}

#zotero-collections-splitter:not([state=collapsed]),
#zotero-items-splitter:not([state=collapsed])[orient=horizontal]
{
    -moz-appearance: none;
    border-inline-start: 1px solid #bdbdbd;
    margin-inline-end: -4px;
    width: 5px !important;
    min-width: 5px;
    position: relative;
    background-image: none;
}

#zotero-items-splitter[orient=vertical]
{
    -moz-border-start: none !important;
    -moz-border-end: none !important;
    background-color: #bdbdbd !important;
    max-height: 1px !important;
    min-height: 1px !important;
    height: 1px !important;
}

#zotero-collections-splitter:not([state=collapsed]) > grippy,
#zotero-items-splitter:not([state=collapsed]) > grippy
{
    display: none;
}

#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed] {
    border: 0 solid #d6d6d6 !important;
    padding: 0;
}

#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed][orient=horizontal]
{
    background-image: url("chrome://zotero/skin/mac/vsplitter.png");
    background-repeat: repeat-y;
    max-width: 8px !important;
    min-width: 8px !important;
    width: 8px !important;
}

#zotero-items-splitter[state=collapsed][orient=vertical]
{
    background-image: url("chrome://zotero/skin/mac/hsplitter.png");
    background-repeat: repeat-x;
    max-height: 8px !important;
    min-height: 8px !important;
    height: 8px !important;
}

#zotero-collections-splitter[state=collapsed] {
    border-right-width: 1px !important;
}

#zotero-items-splitter[state=collapsed] {
    border-left-width: 1px !important;
}

#zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy
{
    -moz-appearance: none;
    background: url(chrome://zotero/skin/mac/vgrippy.png) center/auto 8px no-repeat;
    width: 8px;
}

#zotero-tags-splitter
{
    -moz-appearance: none;
    border-top: 1px;
    border-bottom: 1px;
    border-color: #A5A5A5;
    height: 8px;
    background-image: url("chrome://zotero/skin/mac/hsplitter.png") !important;
    background-repeat: repeat-x;
    padding: 0;
}

#zotero-tags-splitter > grippy
{
    -moz-appearance: none;
    background: url(chrome://zotero/skin/mac/hgrippy.png) center/auto 8px no-repeat;
    height: 8px;
}

#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover, #zotero-items-splitter  > grippy:hover
{
    background-color:transparent;
}

#zotero-items-tree
{
    -moz-appearance: none;
    border: none;
    margin: 0;
    padding: 0;
}

#zotero-items-tree treechildren::-moz-tree-cell,
#zotero-items-tree treechildren::-moz-tree-column {
  border-right: 1px solid #d7dad7;
}

treechildren::-moz-tree-twisty {
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    list-style-image: url("chrome://zotero/skin/mac/twisty.svg");
    -moz-padding-start: 5px;
    -moz-padding-end: 6px;
}

treechildren::-moz-tree-twisty(open) {
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    list-style-image: url("chrome://zotero/skin/mac/twisty-open.svg");
    -moz-padding-start: 4px;
    -moz-padding-end: 7px;
}

/* How to get active twisty?
treechildren::-moz-tree-twisty(active) {
    -moz-appearance: none;
    list-style-image: url("chrome://zotero/skin/mac/twisty-active.svg") !important;
}

treechilren::-moz-tree-twisty(active) {
    -moz-appearance: none;
    list-style-image: url("chrome://zotero/skin/mac/twisty-active-open.svg");
}
*/

tree:focus treechildren::-moz-tree-twisty(selected) {
    -moz-appearance: none;
    list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}

tree:focus treechildren::-moz-tree-twisty(selected, open) {
    -moz-appearance: none;
    list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}

treechildren::-moz-tree-image {
    height: 16px;
    padding-bottom: 1px;
}

#zotero-tb-advanced-search
{
    list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search.png');
}

#zotero-tb-note-add
{
    list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add.png');
}

#zotero-collectionmenu > .menuitem-iconic, #zotero-itemmenu > .menuitem-iconic, #zotero-collectionmenu > .menu-iconic, #zotero-itemmenu > .menu-iconic {
    padding-top: 0px !important;
    padding-bottom: 2px !important;
    list-style-image: none !important;
}

#zotero-collectionmenu > .menuitem-iconic > .menu-iconic-left, #zotero-itemmenu > .menuitem-iconic > .menu-iconic-left, #zotero-collectionmenu > .menu-iconic > .menu-iconic-left, #zotero-itemmenu > .menu-iconic > .menu-iconic-left {
    display: none;
}

/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
@media (min-resolution: 1.25dppx) {
    .zotero-tb-button,.zotero-tb-button:first-child,.zotero-tb-button:last-child  { background: url("chrome://zotero/skin/mac/menubutton-end@2x.png") right center/auto 24px no-repeat; }
    .zotero-tb-button > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start@2x.png") left center/auto 24px no-repeat; }
    .zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window@2x.png") left center/auto 24px no-repeat; }
    .zotero-tb-button:-moz-window-inactive,.zotero-tb-button:-moz-window-inactive:first-child,.zotero-tb-button:-moz-window-inactive:last-child  { background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window@2x.png") right center/auto 24px no-repeat; }
    .zotero-tb-button[open="true"],.zotero-tb-button:not([disabled="true"]):hover:active  { background: url("chrome://zotero/skin/mac/menubutton-end-pressed@2x.png") right center/auto 24px no-repeat; }
    .zotero-tb-button[open="true"] > .toolbarbutton-icon,.zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start-pressed@2x.png") left center/auto 24px no-repeat; }
    #zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy { background: url(chrome://zotero/skin/mac/vgrippy@2x.png) center/auto 8px no-repeat; }
    #zotero-tags-splitter > grippy { background: url(chrome://zotero/skin/mac/hgrippy@2x.png) center/auto 8px no-repeat; }
    #zotero-tb-advanced-search { list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png'); }
    #zotero-tb-note-add { list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png'); }
}
Rosmaninho commented 3 years ago

"*\zotero\chrome\content\zotero-platform\mac\integration.css"

/* Force use of Lucida for Catalina */
html > body {
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, -apple-system, sans-serif !important;
}

body {
    line-height: 1.45em;
    font-size: 15px;
}

body[multiline="true"] {
    line-height: 26px;
}

#quick-format-dialog {
    background: transparent;
    -moz-appearance: none;
    padding: 0;
    width: 800px;
}

#quick-format-dialog.progress-bar #quick-format-deck {
    height: 37px;
}

#quick-format-search {
    background: white;
    -moz-appearance: searchfield;
}

#quick-format-search[multiline="true"] {
    padding: 2px 2px 0 19.5px;
    margin: 2.5px 3.5px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    -moz-appearance: none;
}

#quick-format-search:not([multiline="true"]) {
    padding-top: 4.5px;
    height: 37px !important;
}

#quick-format-entry {
    background: -moz-linear-gradient(-90deg, rgb(243,123,119) 0, rgb(180,47,38) 50%, rgb(156,36,27) 50%);
    padding: 12px;
}

#zotero-icon {
    margin: -2.5px 0 3px -6px;
}

#quick-format-search[multiline="true"] #zotero-icon {
    margin: 0 0 1px -13px;
}

#citation-properties menulist {
    -moz-appearance: none; color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.65);
    background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
    background-clip: padding-box;
    background-origin: padding-box;
    padding: 2px 9px;
    border-radius: 3px;
    min-height: 22px;
    -moz-padding-start: 4px;
    -moz-padding-end: 0;
}

#citation-properties menulist:-moz-focusring {
    box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
}

#citation-properties menulist[open="true"],
#citation-properties menulist:hover:active {
    background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
    box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
}

#citation-properties menulist > .menulist-dropmarker {
    -moz-appearance: none;
    display: -moz-box;
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

#citation-properties menulist > .menulist-dropmarker > .dropmarker-icon {
    list-style-image: url("chrome://browser/skin/hud-style-dropmarker-double-arrows.png");
}

panel button {
  -moz-appearance: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); border-radius: 12px; border: 1px solid rgba(0,0,0,.65); background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); background-clip: padding-box; background-origin: padding-box; padding: 2px 9px;
  margin: 6px;
  min-height: 22px;
}

panel button:hover:active {
  background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
}

panel button:-moz-focusring {
  box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
}

.quick-format-bubble {
    padding: 1px 6px 1px 6px;
}
west-shell commented 3 years ago

could you share the modified zotero.jar file please

Rosmaninho commented 3 years ago

It's the one on your Zotero install folder.

Rosmaninho commented 3 years ago

zotero.zip

Rosmaninho commented 3 years ago

Just unzip that file, it has all the folders that were present in Zotero.jar.

zionlion77 commented 3 years ago

The Windows folder C:\Users\User_name\AppData\Roaming\Zotero\Zotero\Profiles\user_profile.default\ is on MacOS under /Users/User_name/Library/Application Support/Zotero/Profiles/user_profile.default

I tried to place the userChrome.css file in there and it works in changing the colours in Zotero. However, the result is not optimal, since not all necessary colours are properly set. I also added the above mentioned css files to the same folder, but that didn't change the layout at all. Any ideas what could be done to get the same layout as in windows?

zionlion77 commented 3 years ago

I just realised that there is a mac patch tree, which worked well for me: https://github.com/quin-q/Zotero-Dark-Theme/tree/mac-patch

Rosmaninho commented 3 years ago

Cool! Can you show me a screenshot of how it looks?

yiktungho commented 3 years ago

I forked quin-q's mac version and worked on it further to get the toolbars dark etc. Thanks for the pointers to go look at the .css files, though I had to look even deeper into the source .xul files to identify what element corresponds to the UI, that's how I did some parts of it. My current version is still far from perfect (the tag textbox is still white, I forget to write that down in the readme, etc.) since I couldn't figure everything out and this was a rough job.

I have a screenshot in my repo: https://github.com/yiktungho/Zotero-Dark-Theme/tree/mac-patch

Rosmaninho commented 3 years ago

It's looking great!!! I don't know is why there's a white border in the #zotero-items-tree treecol along the items-tree. There shouldn't be any line, that does not happen in Windows.

What is the problem you are having with the tag textbox? Do you mean the tags in the item-pane or the tags in the lower right corner? If it's the last, I couldn't figure out how to change it, but to be honest, I don't mind that box looking white as long as I can make it feel cohesive. If it's the tag textbox drop-down in the Item pane I already addressed that:

/*fixed color in drop-down tags: see https://css-tricks.com/solved-with-css-dropdown-menus/*/
#tags-box-container ul li ul { background: #7E7E7E !important; color: black !important; }

Hope that helps you. Can't wait to see your next improvements. :D

yiktungho commented 3 years ago

I meant the item pane, the textbox was still white: tag unfixed Thanks for the tip, I fixed it. tag dropdown fixed But the original issue of the input box being white I had to set -moz-appearance: none on input globally to get it to work after all, which affects the aesthetic appearance of the tag search bar. Oh well it's still functional.

Rosmaninho commented 3 years ago

Oh, You managed to change the color of the input box? What's the code for that? By the way how did you change the color of the search box and tags box as well?

I tried changing #zotero-tag-selector-container and #zotero-tb-search but the background and background-color parameters don't change them.

Edit. Already fixed that in mine as well. Now to change the background color of the tags box...

Rosmaninho commented 3 years ago

I meant the item pane, the textbox was still white: tag unfixed Thanks for the tip, I fixed it. tag dropdown fixed But the original issue of the input box being white I had to set -moz-appearance: none on input globally to get it to work after all, which affects the aesthetic appearance of the tag search bar. Oh well it's still functional.

By the way, I managed to theme the tag selector under the collections tree. If you want to adjust your theme you can use the following code:

`#zotero-tag-selector-container { border-bottom: 1px solid #1d1d1d !important; border-top:1px solid #1d1d1d !important;}

zotero-tag-selector-container input { -moz-appearance: none !important;

background: #474749 !important; border: 1px solid #1d1d1d !important; color: white !important; }

.tag-selector-list-container {-moz-appearance: none !important; background: #474749 !important; color: white !important; }

.tag-selector-item:hover { color: black !important; }`

Could you share your userchrome.css as well? I might try to find a Macbook to play with it eventually. :)

yiktungho commented 3 years ago

@Rosmaninho The input box background color code should be this acting globally:

input { background-color: #656567 !important; -moz-appearance: none !important; }

Thanks for the info, I'll check it out when I have time and continue to push changes if I make them, it seems things are different on Mac though so not all windows tweaks work right away.

I don't think my current edited theme file is mature/ready enough (and I have some personal pref edits such as the spacing between items), but when you do get a mac maybe we can do a PR and continue work on your main repo (on a branch)? This way others can also contribute to a common repo.

The userChrome.css is in my forked repo (on the mac-patch branch) https://github.com/yiktungho/Zotero-Dark-Theme/blob/mac-patch/userChrome.css

Rosmaninho commented 3 years ago

Yeah, I managed to change the input colors! I didn't do it globally though. I probably should to clean up the code. I just checked why I didn't do it like that: I use different color for input in tag box container, and input in tag selector. Also I like to place some black borders to make the input more clearly defined, and by using borders on input globally, it messes with the way i configured the search input.

invu7 commented 2 years ago

Thanks for developing the dark theme for Zotero and for tailoring it for the Mac version as well (@yiktungho). Since the Zotero update dated 3/17/22, the dark theme started to be broken. I noticed that @Rosmaninho posted an updated version (for Windows) but I was wondering if there is an update for the Mac version as well? (Would the updated file just work for the Mac version? I just went through the hassle of reverting the Zotero update to get back the dark theme, so I am hesitant to try it..) Thanks!

ghost commented 2 years ago

I managed to fix the item tree and toolbar buttons by adding the following. 

/* Items Tree Background */
#zotero-items-tree,
#zotero-items-tree * {
    background: #323234;
}

/* Toolbar Buttons */
.zotero-tb-button,
.toolbarbutton-icon {
    background: transparent !important;
}

This isn't my strong suit, and I'm afraid it's as much as I can contribute. I really hope someone can pick this up and make a fully functional dark theme for MacOS.

yiktungho commented 2 years ago

@invu7 I updated the userChrome.css in my forked repo with some quick and dirty fixes for Zotero 6 on Mac, hope it's good enough for your use case. The mac theme was never perfect, I only fixed what I needed or could. Unfortunately the alternating row colours for the item tree are gone and I have no idea how to get them back. If anyone figures this out please let us all know! Thanks to @Rosmaninho for your work on the updates required for Zotero 6 so I could port them easily over to this fork.

invu7 commented 2 years ago

@invu7 I updated the userChrome.css in my forked repo with some quick and dirty fixes for Zotero 6 on Mac, hope it's good enough for your use case. The mac theme was never perfect, I only fixed what I needed or could. Unfortunately the alternating row colours for the item tree are gone and I have no idea how to get them back. If anyone figures this out please let us all know! Thanks to @Rosmaninho for your work on the updates required for Zotero 6 so I could port them easily over to this fork.

@yiktungho Just updated it on my mac, and it looks great! Thanks so much for the work!