Bug 1709641 - adjust dark mode modal dialog background, mask and box shadow, r=bigiri

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

browser/base/content/browser.css

@@ -1551,7 +1551,7 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
 
 .dialogBox {
   background-clip: content-box;
-  box-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2);
+  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
   display: -moz-box;
   margin: 0;
   padding: 0;
@@ -1659,11 +1659,11 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
 
 .dialogOverlay[topmost="true"],
 #window-modal-dialog::backdrop {
-  background-color: rgba(91, 91, 102, 0.45);
+  background-color: rgba(28, 27, 34, 0.45);
 }
 
 #window-modal-dialog.showToolbar::backdrop {
-  background: linear-gradient(transparent, rgba(91, 91, 102, 0.45) 20%);
+  background: linear-gradient(transparent, rgba(28, 27, 34, 0.45) 20%);
 }
 
 /* For the window-modal dialog, the background is supplied by the HTML dialog

browser/themes/shared/preferences/preferences.inc.css

@@ -579,6 +579,13 @@ checkbox {
   overflow-x: auto;
 }
 
+@media (-moz-toolbar-prefers-color-scheme: dark) {
+  .dialogBox {
+    --in-content-page-background: #42414d;
+  }
+}
+
+
 .dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;

toolkit/modules/SubDialog.jsm

@@ -349,10 +349,13 @@ SubDialog.prototype = {
       this.injectXMLStylesheet(styleSheetURL);
     }
 
+    let { contentDocument } = this._frame;
     // Provide the ability for the dialog to know that it is being loaded "in-content".
-    for (let dialog of this._frame.contentDocument.querySelectorAll("dialog")) {
+    for (let dialog of contentDocument.querySelectorAll("dialog")) {
       dialog.setAttribute("subdialog", "true");
     }
+    // Used by CSS to give the appropriate background colour in dark mode.
+    contentDocument.documentElement.setAttribute("dialogroot", "true");
 
     this._frame.contentWindow.addEventListener("dialogclosing", this);
 
@@ -414,9 +417,7 @@ SubDialog.prototype = {
     this._overlay.style.opacity = "0.01";
 
     // Ensure the document gets an a11y role of dialog.
-    const a11yDoc =
-      this._frame.contentDocument.body ||
-      this._frame.contentDocument.documentElement;
+    const a11yDoc = contentDocument.body || contentDocument.documentElement;
     a11yDoc.setAttribute("role", "dialog");
 
     Services.obs.notifyObservers(this._frame.contentWindow, "subdialog-loaded");

toolkit/themes/shared/in-content/common.inc.css

@@ -185,6 +185,13 @@
 
     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;
+  }
 }
 
 @media not (-moz-proton) {