1 files changed, 15 insertions, 17 deletions

diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index c8f4f3efd2..86c6d36210 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -14,9 +14,9 @@
 :host(:is(.anonymous-content-host, notification-message)),
 :root {
   --in-content-page-color: rgb(21, 20, 26);
-  --in-content-page-background: #fff;
+  --in-content-page-background: var(--background-color-canvas);
   --in-content-text-color: var(--in-content-page-color);
-  --in-content-box-background: var(--box-background-color);
+  --in-content-box-background: var(--background-color-box);
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
   --in-content-box-info-background: #f0f0f4;
@@ -122,7 +122,6 @@
      * just replace most of these for system colors and remove all this
      * duplication (assuming we honor the preferred color scheme for
      * in-content privileged pages and plain-text documents). */
-    --in-content-page-background: rgb(28,27,34);
     --in-content-page-color: rgb(251,251,254);
 
     --in-content-box-background-odd: rgba(249,249,250,0.05);
@@ -156,20 +155,19 @@
   }
 
   /* For dialogs, use a different background colour. We don't do
-   * this in High Contrast mode, as we should be using system colours then.
+   * this in forced colors mode, as we should be using system colours then.
    */
-  @media not (prefers-contrast) {
+  @media not (forced-colors) {
     :root[dialogroot] {
       --in-content-page-background: #42414d;
     }
   }
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   :host(:is(.anonymous-content-host, notification-message)),
   :root {
     --in-content-page-color: CanvasText;
-    --in-content-page-background: Canvas;
 
     --in-content-box-background-odd: var(--in-content-box-background);
     --in-content-box-border-color: -moz-DialogText;
@@ -304,7 +302,7 @@ xul|tab[selected]:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   xul|tab:hover,
   xul|tab:hover:active {
     border-bottom-color: currentColor;
@@ -483,7 +481,7 @@ xul|button.primary:not([disabled="true"]):hover:active {
   border-color: var(--in-content-primary-button-border-active);
 }
 
-@media not (prefers-contrast) {
+@media not (forced-colors) {
   html|button.semi-transparent:not(.ghost-button, .primary):enabled {
     background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
@@ -504,7 +502,7 @@ xul|button.primary:not([disabled="true"]):hover:active {
   --in-content-focus-outline-color: var(--in-content-danger-button-background);
 }
 
-@media not (prefers-contrast) {
+@media not (forced-colors) {
   html|button.ghost-button {
     background-color: transparent;
   }
@@ -798,7 +796,7 @@ html|*#categories > html|*.category:dir(rtl) {
   border-color: var(--in-content-button-border-color-active);
 }
 
-@media not (prefers-contrast) {
+@media not (forced-colors) {
   #categories > .category[selected],
   #categories > .category.selected {
     color: var(--in-content-accent-color);
@@ -815,7 +813,7 @@ html|*#categories > html|*.category:dir(rtl) {
   }
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   #categories > .category {
     /* The transition causes issues with the text getting a background while
      * transitioning and it looks weird. */
@@ -963,7 +961,7 @@ xul|treechildren::-moz-tree-row(selected) {
   color: var(--in-content-item-selected-text);
 }
 
-@media not (prefers-contrast) {
+@media not (forced-colors) {
   xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
     /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
     --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent);
@@ -981,8 +979,8 @@ xul|richlistitem[selected] xul|menulist:focus-visible {
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
-    an existing high-contrast border that uses the background color */
-@media (prefers-contrast) {
+    an existing forced colors border that uses the background color */
+@media (forced-colors) {
   xul|treechildren::-moz-tree-row(selected) {
      border: 2px solid currentColor;
      border-radius: 4px;
@@ -1046,7 +1044,7 @@ xul|treecol:not([hideheader="true"], :first-child),
   border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   xul|treecol:not([hideheader="true"], :first-child),
   xul|treecolpicker {
     --in-content-box-border-color: var(--in-content-button-border-color);
@@ -1191,7 +1189,7 @@ input[type="text"][warning]:enabled:not(:focus) {
   align-items: center;
 }
 
-@media (prefers-contrast) {
+@media (forced-colors) {
   .sidebar-footer-link {
     /* We need a true transparent but in HCM this would compute to an actual color,
      * so select the page's background color instead: */