Bug 1692237 - Fix colors and backgrounds for in-content XUL menus and system-themed widgets. r=desktop-theme-reviewers,ntim

Differential Revision: https://phabricator.services.mozilla.com/D104930

toolkit/themes/windows/global/global.css

@@ -35,6 +35,7 @@
 @supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
   :root {
+    /* Override some menu color variables for light browser themes. */
     --menuitem-hover-background-color: #0250bb;
     --menuitem-disabled-hover-background-color: rgba(207, 207, 216, 0.3);
     --menuitem-hover-color: white;
@@ -42,16 +43,42 @@
     --menu-color: black;
     --menu-disabled-color: rgba(21, 20, 26, 0.4);
     --menu-border-color: #f0f0f4;
+
+    /* Declare menu colors for dark themes, but don't override anything yet. */
+    --dark-menuitem-hover-background-color: #00b4f5;
+    --dark-menuitem-disabled-hover-background-color: rgba(74, 74, 85, 0.5);
+    --dark-menuitem-hover-color: black;
+    --dark-menu-background-color: #15141a;
+    --dark-menu-color: white;
+    --dark-menu-disabled-color: rgba(251, 251, 254, 0.6);
+    --dark-menu-border-color: #5b5b67;
   }
 
+  /* Override the menu color variables for dark browser themes. */
   :root:-moz-lwtheme-brighttext {
-    --menuitem-hover-background-color: #00b4f5;
-    --menuitem-disabled-hover-background-color: rgba(74, 74, 85, 0.5);
-    --menuitem-hover-color: black;
-    --menu-background-color: #15141a;
-    --menu-color: white;
-    --menu-disabled-color: rgba(251, 251, 254, 0.6);
-    --menu-border-color: #5b5b67;
+    --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
+    --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
+    --menuitem-hover-color: var(--dark-menuitem-hover-color);
+    --menu-background-color: var(--dark-menu-background-color);
+    --menu-color: var(--dark-menu-color);
+    --menu-disabled-color: var(--dark-menu-disabled-color);
+    --menu-border-color: var(--dark-menu-border-color);
+  }
+
+  /* We also need to override these color variables in situations where
+     -moz-lwtheme isn't used and the colors are selected based only on the
+     system color scheme. Some of these occur in-content (for example
+     about:preferences), but some do not (like the library/places window). */
+  @media (prefers-color-scheme: dark) {
+    :root:not(:-moz-lwtheme) {
+      --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
+      --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
+      --menuitem-hover-color: var(--dark-menuitem-hover-color);
+      --menu-background-color: var(--dark-menu-background-color);
+      --menu-color: var(--dark-menu-color);
+      --menu-disabled-color: var(--dark-menu-disabled-color);
+      --menu-border-color: var(--dark-menu-border-color);
+    }
   }
 }
 }

toolkit/themes/windows/global/in-content/common.css

@@ -54,3 +54,12 @@ html|button {
 xul|button > xul|*.button-box {
   padding-inline: 0;
 }
+
+@supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+  xul|menulist > xul|menupopup {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+}