--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -48,41 +48,42 @@ addon-list .addon.card {
   object-fit: cover;
 }
 
 .card-heading-icon {
   flex-shrink: 0;
   width: var(--addon-icon-size);
   height: var(--addon-icon-size);
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-contents {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
 .card-actions {
   flex-shrink: 0;
 }
 
 .addon-name {
   font-size: 16px;
   font-weight: 600;
-  color: var(--grey-90);
   line-height: 22px;
   /* Subtract the top line-height so the text and icon align at the top. */
   margin-top: -3px;
 }
 
 .addon-description {
   font-size: 14px;
   line-height: 20px;
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
   font-weight: 400;
 }
 
 /* Prevent the content from wrapping unless expanded. */
 addon-card:not([expanded]) .card-contents {
   /* Card padding times 4: 2 times for card, 1 between icon and content,
    * 1 for the ... button. */
   width: calc(var(--section-width) - var(--card-padding) * 4 - var(--addon-icon-size));
@@ -98,20 +99,16 @@ addon-card:not([expanded]) .addon-descri
 
 .more-options-menu {
   position: relative;
   /* Add some negative margin to account for the button's padding */
   margin-top: -10px;
   margin-inline-end: -8px;
 }
 
-addon-details {
-  color: var(--grey-60);
-}
-
 .addon-detail-description {
   margin: 16px 0;
 }
 
 .addon-detail-contribute {
   padding: var(--card-padding);
   border: 1px solid var(--grey-90-a20);
   border-radius: var(--panel-border-radius);
@@ -189,28 +186,30 @@ addon-details {
 }
 
 button[action="more-options"] {
   min-width: auto;
   min-height: auto;
   width: 24px;
   height: 24px;
   margin: 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
   background: url("chrome://global/skin/icons/more.svg") no-repeat center center;
 }
 
 panel-item[action="remove"] {
   -moz-context-properties: fill;
   fill: currentColor;
   --icon: url("chrome://global/skin/icons/delete.svg");
 }
 
 panel-item-separator {
   display: block;
   height: 1px;
-  background: var(--panel-border-color);
+  background: var(--in-content-box-border-color);
   padding: 0;
   margin: 6px 0;
 }
 
 panel-item-separator[hidden] {
   display: none;
 }

--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,9 +1,10 @@
 button {
+  color: inherit;
   background-color: transparent;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
   display: block;
   font-size: inherit;

--- a/toolkit/mozapps/extensions/content/panel-list.css
+++ b/toolkit/mozapps/extensions/content/panel-list.css
@@ -4,17 +4,17 @@
 
 :host([showing]) {
   visibility: hidden;
 }
 
 :host {
   position: absolute;
   background: var(--in-content-box-background);
-  border: 1px solid var(--panel-border-color);
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   padding: 6px 0;
   margin-bottom: 16px;
   box-shadow: var(--shadow-30);
   min-width: 12em;
   z-index: 1;
   white-space: nowrap;
 }
@@ -39,17 +39,17 @@
   margin: 0;
   padding: 0;
 }
 
 .arrow {
   width: 18px;
   height: 9px;
   -moz-context-properties: fill, stroke;
-  stroke: var(--panel-border-color);
+  stroke: var(--in-content-box-border-color);
   fill: var(--in-content-box-background);
   background: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   position: absolute;
 }
 
 :host([valign="bottom"]) > .arrow.bottom,
 :host([valign="top"]) > .arrow.top {
   display: none;

--- a/toolkit/mozapps/extensions/content/shortcuts.css
+++ b/toolkit/mozapps/extensions/content/shortcuts.css
@@ -15,16 +15,18 @@
 .shortcut.card:hover {
   box-shadow: var(--card-shadow);
 }
 
 .card-heading-icon {
   width: 24px;
   height: 24px;
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-heading {
   display: flex;
   font-weight: 600;
 }
 
 .shortcuts-empty-label {

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -5,22 +5,23 @@
 %endif
 @namespace html "http://www.w3.org/1999/xhtml";
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 *|*:root {
   --in-content-page-color: #0c0c0d;
   --in-content-page-background: #f9f9fa;
   --in-content-text-color: var(--grey-90);
+  --in-content-deemphasized-text: var(--grey-60);
   --in-content-selected-text: #fff;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-background-hover: #ededf0; /* grey 20 */
   --in-content-box-background-active: #d7d7db; /* grey 30 */
-  --in-content-box-border-color: var(--grey-90-a40);
+  --in-content-box-border-color: var(--grey-90-a30);
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
   --in-content-border-hover: var(--grey-90-a50);
   --in-content-border-active: var(--blue-50);
   --in-content-border-active-shadow: var(--blue-50-a30);
   --in-content-border-invalid: var(--red-50);
@@ -43,31 +44,31 @@
   --in-content-button-background-active: var(--grey-90-a30);
   --in-content-primary-button-background: var(--blue-60);
   --in-content-primary-button-background-hover: var(--blue-70);
   --in-content-primary-button-background-active: var(--blue-80);
   --in-content-table-background: #ebebeb;
   --in-content-table-border-dark-color: #d1d1d1;
   --in-content-table-header-background: #0a84ff;
 
-  --panel-border-color: var(--grey-90-a20);
   --panel-border-radius: 2px; /* This is overridden on Windows */
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   --blue-40: #45a1ff;
   --blue-40-a10: rgb(69, 161, 255, 0.1);
   --blue-50: #0a84ff;
   --blue-50-a30: rgba(10, 132, 255, 0.3);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
+  --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-90: #0c0c0d;
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a40: rgba(12, 12, 13, 0.4);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
@@ -90,16 +91,17 @@
 }
 
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :root {
     --in-content-page-background: #2A2A2E;
     --in-content-page-color: rgb(249, 249, 250);
     --in-content-text-color: var(--in-content-page-color);
+    --in-content-deemphasized-text: var(--grey-40);
     --in-content-box-background: #202023;
     --in-content-box-background-hover: rgba(249,249,250,0.15);
     --in-content-box-background-active: rgba(249,249,250,0.2);
     --in-content-box-background-odd: rgba(249,249,250,0.05);
 
     --in-content-border-color: rgba(249,249,250,0.2);
     --in-content-border-hover: rgba(249,249,250,0.3);
     --in-content-box-border-color: rgba(249,249,250,0.2);