Thunderbird 115 - Dark theme fixes

Nomes77 · Sep 25, 2023 · ea535db · ea535db
1 parent 0db1270
commit ea535db
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 20 deletions.
diff --git a/Thunderbird/src/my-variables.css b/Thunderbird/src/my-variables.css
@@ -34,15 +34,18 @@
       --win-toolbar-height: 24px;
       --win-header-background-color: rgb(240, 240, 240);
     }
-    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: dark) {
       :host, :root {
         --lwt-text-color: rgb(255, 255, 255) !important;
         --lwt-toolbar-field-focus-color: rgb(255, 255, 255) !important;
         --sidebar-text-color: rgb(255, 255, 255) !important;
         --win-theme-color: rgb(0, 0, 0);
         --win-menuitem-border-color: rgb(0, 255, 0);
         --win-header-background-color: rgb(15, 15, 15);
-       }
+      }
+      html[lwtheme-image="true"] {
+        --win-toolbarbutton-border-color: rgb(0, 255, 0);
+      } 
     }
   }
 }
diff --git a/Thunderbird/userChrome.css b/Thunderbird/userChrome.css
@@ -21,19 +21,17 @@
     }
 
 /* Toolbar Color */
-    #navigation-toolbox,
-    #mail-toolbox,
-    #compose-toolbox {
-    /* [id^="addressBookTab"] browser[id^="addressBookTabBrowser"] #toolbox,
-    #tabs-toolbar */
+    html:not([lwtheme-image="true"]) #navigation-toolbox,
+    html:not([lwtheme-image="true"]) #mail-toolbox,
+    html:not([lwtheme-image="true"]) #compose-toolbox {
       background-image: var(--win-toolbox-background-image) !important;
       color: var(--win-black-color) !important;
     }
-    .mail-toolbox > toolbar:not([type="menubar"]),
-    #compose-toolbox > toolbar:not([type="menubar"]) {
+    html:not([lwtheme-image="true"]) .mail-toolbox > toolbar:not([type="menubar"]),
+    html:not([lwtheme-image="true"]) #compose-toolbox > toolbar:not([type="menubar"]) {
       background-image: var(--win-toolbar-background-image) !important;
     }
-    #compose-toolbox > toolbar[type="menubar"] {
+    html:not([lwtheme-image="true"]) #compose-toolbox > toolbar[type="menubar"] {
       background-color: transparent !important;
     }
 
@@ -83,15 +81,16 @@
     #composeToolbar2 toolbaritem > menulist {
       box-shadow: none !important;
     }
-    .button.toolbar-button:not([disabled="true"]):hover,
-    .button.unified-toolbar-button:not([id^="threadPane"]):enabled:hover,
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover,
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover > .toolbarbutton-menubutton-button,
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover > .toolbarbutton-menubutton-dropmarker,
+    .button.toolbar-button:not([disabled="true"]):is(:hover, :active),
+    .button.unified-toolbar-button:not([id^="threadPane"]):enabled:is(:hover, :active),
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active),
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active) > .toolbarbutton-menubutton-button,
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active) > .toolbarbutton-menubutton-dropmarker,
     #composeToolbar2 toolbaritem > menulist:not([disabled="true"], [open="true"]):hover {
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-hover-background) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
+      color: var(--win-black-color) !important;
     }
     .button.toolbar-button:not([disabled="true"]):hover:active,
     .button.unified-toolbar-button:not([id^="threadPane"]):enabled:hover:active,
@@ -102,6 +101,7 @@
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-active-background) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
+      color: var(--win-black-color) !important;
     }
     .button.toolbar-button[open="true"]:not([disabled="true"]),
     .button.unified-toolbar-button[aria-pressed="true"]:not([id^="threadPane"]):enabled,
@@ -112,6 +112,21 @@
       background-image: var(--win-toolbarbutton-active-background-open) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
       border-bottom: 1px solid rgb(246, 246, 246) !important;
+      color: var(--win-black-color) !important;
+    }
+    .toolbarbutton-1:not([disabled="true"]):is(:hover, :active, :hover:active, [open="true"]) > .toolbarbutton-menubutton-dropmarker {
+      border-color: var(--win-toolbarbutton-border-color) !important;      
+    }
+    @media (prefers-color-scheme: dark) {
+      #header-view-toolbar .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button,
+      #header-view-toolbar .toolbarbutton-1:not([disabled="true"]) {
+        border-color: var(--win-white-color) !important;
+      }
+      #header-view-toolbar .toolbarbutton-1:not([disabled="true"]):is(:hover, :active, :hover:active, [open="true"]) > .toolbarbutton-menubutton-button,
+      #header-view-toolbar .toolbarbutton-1:not([disabled="true"]):is(:hover, :active, :hover:active, [open="true"]) > .toolbarbutton-menubutton-dropmarker,
+      #header-view-toolbar .toolbarbutton-1:not([disabled="true"]):is(:hover, :active, :hover:active, [open="true"]) {
+        border-color: var(--win-white-color) !important;
+      }
     }
     #composeToolbar2 toolbaritem > menulist,
     #FormatToolbar menulist {
@@ -200,6 +215,11 @@
       min-width: 1.5px !important;
       background-image: linear-gradient(to right, rgb(70, 105, 170), rgb(245, 250, 255)) !important;
     }
+    @media (prefers-color-scheme: dark) {
+      html[lwtheme-image="true"] .delete .button.unified-toolbar-button:not([aria-pressed="true"], :hover) > img {
+        filter: invert(1) !important;
+      }
+    }
 
 /* Spaces Toolbar Icons Layout */
     #collapseButton img {
@@ -251,6 +271,7 @@
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-hover-background) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
+      color: var(--win-black-color) !important;
     }
     menubar > menu[_moz-menuactive="true"][open="true"]:not([disabled="true"]) {
       background-color: transparent !important;
@@ -426,7 +447,6 @@
       opacity: 0.6;
     }
     .noselect-folder > .container > .name {
-      font-style: italic;
       opacity: 0.6;
     }
     #folderTree:focus-within li.noselect-folder.selected > .container > .name {
@@ -684,6 +704,9 @@
       #InsertPopup > menuitem:not([disabled="true"],:hover, :active):is(#InsertHRuleItem, #InsertTableItem) .menu-iconic-icon {
         filter: invert(1) !important;
       }
+      #FormatToolbar > menulist:not([disabled="true"]):is(:hover, , [open="true"]) {
+        color: var(--win-black-color) !important;
+      }
     }
 
 /* Calender & Tasks */

diff --git a/Thunderbird/userContent.css b/Thunderbird/userContent.css
@@ -22,26 +22,32 @@
     .toolbarbutton-menubutton-dropmarker {
       box-shadow: none !important;
     }
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover,
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover > .toolbarbutton-menubutton-button,
-    .toolbarbutton-1:not([disabled="true"], [open="true"]):hover > .toolbarbutton-menubutton-dropmarker {
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active),
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active) > .toolbarbutton-menubutton-button,
+    .toolbarbutton-1:not([disabled="true"], [open="true"]):is(:hover, :active) > .toolbarbutton-menubutton-dropmarker {
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-hover-background) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
+      color: var(--win-black-color) !important;
     }
     .toolbarbutton-1:not([disabled="true"], [open="true"]):hover:active,
     .toolbarbutton-1:not([disabled="true"], [open="true"]):hover:active > .toolbarbutton-menubutton-button,
     .toolbarbutton-1:not([disabled="true"], [open="true"]):hover:active > .toolbarbutton-menubutton-dropmarker {
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-active-background) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
+      color: var(--win-black-color) !important;
     }
     .toolbarbutton-1[open="true"]:not([disabled="true"]),
     .toolbarbutton-1[open="true"]:not([disabled="true"]) > .toolbarbutton-menubutton-button {
       background-color: transparent !important;
       background-image: var(--win-toolbarbutton-active-background-open) !important;
       border-color: var(--win-toolbarbutton-border-color) !important;
       border-bottom: 1px solid rgb(246, 246, 246) !important;
+      color: var(--win-black-color) !important;
+    }
+    .toolbarbutton-1:not([disabled="true"]):is(:hover, :active, :hover:active, [open="true"]) > .toolbarbutton-menubutton-dropmarker {
+      border-color: var(--win-toolbarbutton-border-color) !important;      
     }
     .toolbarbutton-1[open="true"]:not([disabled="true"]) > .toolbarbutton-menubutton-dropmarker {
       border-bottom: 0px solid rgb(246, 246, 246) !important;
@@ -99,7 +105,7 @@
     treechildren::-moz-tree-image(GeneratedName, MailList) {
       height: 16px;
     }
-    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: dark) {
       .contentTabToolbar > .toolbarbutton-1:not([disabled="true"]):is(:hover, [open="true"], :hover:active) {
         color: rgb(0, 0, 0) !important;
       }