diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index 30f1f61a5fe7..1866eaa05d81 100644 --- a/toolkit/themes/windows/global/global.css +++ b/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); + } } } } diff --git a/toolkit/themes/windows/global/in-content/common.css b/toolkit/themes/windows/global/in-content/common.css index fb5ae3ed477e..2b1eaed56b6c 100644 --- a/toolkit/themes/windows/global/in-content/common.css +++ b/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; + } +} +}