Bug 1710847 - fix high contrast mode interaction with dark mode dialogs, r=mstriemer,preferences-reviewers
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 12 May 2021 17:30:25 +0000
changeset 579529 646c72ffc2727b5ddd3cffd1e59a54ecb9bb1687
parent 579528 e543a0f83362bd89855d515a2a303f38a9945772
child 579530 453466931a6c57d416d4b8697f7491b11fdaa0d4
push id143042
push usergijskruitbosch@gmail.com
push dateWed, 12 May 2021 17:32:47 +0000
treeherderautoland@646c72ffc272 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer, preferences-reviewers
bugs1710847
milestone90.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1710847 - fix high contrast mode interaction with dark mode dialogs, r=mstriemer,preferences-reviewers Differential Revision: https://phabricator.services.mozilla.com/D114979
browser/themes/shared/preferences/preferences.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/themes/shared/preferences/preferences.inc.css
+++ b/browser/themes/shared/preferences/preferences.inc.css
@@ -583,18 +583,20 @@ checkbox {
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
   display: -moz-box;
   margin: 0;
   padding: 0;
   overflow-x: auto;
 }
 
 @media (-moz-toolbar-prefers-color-scheme: dark) {
-  .dialogBox {
-    --in-content-page-background: #42414d;
+  @media not (prefers-contrast) {
+    .dialogBox {
+      --in-content-page-background: #42414d;
+    }
   }
 }
 
 
 .dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;
   min-height: 20em;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -184,21 +184,26 @@
 
     --card-outline-color: var(--grey-60);
 
     --dialog-warning-text-color: var(--red-40);
 
     scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
   }
 
-  :root[dialogroot],
-  /* Also need this on dialog :hosts, or the rule above will override the
-   * value for this custom property again in the shadow DOM. */
-  :host(dialog) {
-    --in-content-page-background: #42414d;
+  /* For dialogs, use a different background colour. We don't do
+   * this in High Contrast mode, as we should be using system colours then.
+   */
+  @media not (prefers-contrast) {
+    :root[dialogroot],
+    /* Also need this on dialog :hosts, or the rule above will override the
+     * value for this custom property again in the shadow DOM. */
+    :host(dialog) {
+      --in-content-page-background: #42414d;
+    }
   }
 }
 
 @media not (-moz-proton) {
 @media (-moz-toolbar-prefers-color-scheme: dark) {
   :host,
   :root {
     --in-content-page-background: #2A2A2E;