--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -148,17 +148,19 @@
 
 :root:not([accessibilitymode]) .accessibility-indicator,
 :root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
   display: none;
 }
 
 /* End private browsing and accessibility indicators */
 
-/* Force background for datepicker popup to white so themes don't override it */
-#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowbox,
-#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowcontent {
-  --arrowpanel-background: #fff;
+/* Override theme colors since the picker uses extra colors that
+   themes cannot set */
+#DateTimePickerPanel[active="true"] {
+  --arrowpanel-background: var(--default-arrowpanel-background);
+  --arrowpanel-color: var(--default-arrowpanel-color);
+  --arrowpanel-border-color: var(--default-arrowpanel-border-color);
 }
 
 #widget-overflow .webextension-popup-browser {
   background: #fff;
 }

--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -42,18 +42,17 @@
 
 .datetime-edit-field[disabled="true"],
 .datetime-edit-field[readonly="true"]  {
   color: GrayText;
   -moz-user-select: none;
 }
 
 .datetime-reset-button {
-  background-image: url(chrome://global/skin/icons/input-clear.svg);
+  fill: currentColor;
+  opacity: .5;
   background-color: transparent;
-  background-repeat: no-repeat;
-  background-size: 12px, 12px;
   border: none;
-  height: 12px;
-  width: 12px;
   align-self: center;
   flex: none;
+  padding-left: 2px;
+  padding-right: 2px;
 }

--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -1210,17 +1210,21 @@
                 xbl:inherits="context,disabled,readonly" role="presentation">
         <html:span class="datetime-input-edit-wrapper"
                    anonid="edit-wrapper">
           <!-- Each of the date/time input types will append their input child
              - elements here -->
         </html:span>
 
         <html:button class="datetime-reset-button" anonid="reset-button"
-                     tabindex="-1" xbl:inherits="disabled" aria-label="&datetime.reset.label;"/>
+                     tabindex="-1" xbl:inherits="disabled" aria-label="&datetime.reset.label;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+            <path d="M 3.9,3 3,3.9 5.1,6 3,8.1 3.9,9 6,6.9 8.1,9 9,8.1 6.9,6 9,3.9 8.1,3 6,5.1 Z M 12,6 A 6,6 0 0 1 6,12 6,6 0 0 1 0,6 6,6 0 0 1 6,0 6,6 0 0 1 12,6 Z"/>
+          </svg>
+        </html:button>
       </html:div>
     </content>
 
     <implementation implements="nsIDateTimeInputArea">
       <constructor>
       <![CDATA[
         this.DEBUG = false;
         this.mInputElement = this.parentNode;

--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -24,20 +24,23 @@ progressmeter[mode="undetermined"] {
 @media (-moz-menubar-drag) {
   toolbar[type="menubar"]:not([autohide="true"]) {
     -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
   }
 }
 
 /* ::::: Variables ::::: */
 :root {
+  --default-arrowpanel-background: -moz-field;
+  --default-arrowpanel-color: -moz-fieldText;
+  --default-arrowpanel-border-color: ThreeDShadow;
+  --arrowpanel-background: var(--default-arrowpanel-background);
+  --arrowpanel-color: var(--default-arrowpanel-color);
+  --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --arrowpanel-padding: 10px;
-  --arrowpanel-background: -moz-field;
-  --arrowpanel-color: -moz-fieldText;
-  --arrowpanel-border-color: ThreeDShadow;
   --panel-disabled-color: GrayText;
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,

--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -12,19 +12,22 @@
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 16px;
-  --arrowpanel-background: hsla(0,0%,99%,.975);
-  --arrowpanel-color: hsl(0,0%,10%);
-  --arrowpanel-border-color: hsla(210,4%,10%,.05);
+  --default-arrowpanel-background: hsla(0,0%,99%,.975);
+  --default-arrowpanel-color: hsl(0,0%,10%);
+  --default-arrowpanel-border-color: hsla(210,4%,10%,.05);
+  --arrowpanel-background: var(--default-arrowpanel-background);
+  --arrowpanel-color: var(--default-arrowpanel-color);
+  --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --arrowpanel-border-radius: 3.5px;
   --panel-disabled-color: GrayText;
 
   --focus-ring-box-shadow: @focusRingShadow@;
 }
 
 /* ::::: root elements ::::: */
 

--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -10,43 +10,43 @@
   --spinner-item-margin-bottom: 0.1rem;
   --spinner-button-height: 1.2rem;
   --colon-width: 2rem;
   --day-period-spacing-width: 1rem;
   --calendar-width: 23.1rem;
   --date-picker-item-height: 2.5rem;
   --date-picker-item-width: 3.3rem;
 
-  --border: 0.1rem solid #D6D6D6;
+  --border: 0.1rem solid ThreeDShadow;
   --border-radius: 0.3rem;
-  --border-active-color: #B1B1B1;
+  --border-active-color: ButtonShadow;
 
-  --font-color: #191919;
-  --fill-color: #EBEBEB;
+  --font-color: ButtonText;
+  --fill-color: ThreeDFace;
 
-  --today-fill-color: rgb(212, 212, 212);
+  --today-fill-color: ThreeDShadow;
 
-  --selected-font-color: #FFFFFF;
-  --selected-fill-color: #0996F8;
+  --selected-font-color: HighlightText;
+  --selected-fill-color: Highlight;
 
-  --button-font-color: #858585;
-  --button-font-color-hover: #4D4D4D;
-  --button-font-color-active: #191919;
-  --button-fill-color-active: #D4D4D4;
+  --button-font-color: ButtonText;
+  --button-font-color-hover: ButtonText;
+  --button-font-color-active: ButtonText;
+  --button-fill-color-active: ButtonFace;
 
-  --weekday-header-font-color: #6C6C6C;
-  --weekend-header-font-color: rgb(218, 78, 68);
+  --weekday-header-font-color: ButtonText;
+  --weekend-header-font-color: -moz-activehyperlinktext;
 
-  --weekend-font-color: rgb(218, 78, 68);
-  --weekday-outside-font-color: rgb(153, 153, 153);
-  --weekend-outside-font-color: rgb(255, 152, 143);
+  --weekend-font-color: -moz-activehyperlinktext;
+  --weekday-outside-font-color: ButtonText;
+  --weekend-outside-font-color: -moz-activehyperlinktext;
 
-  --weekday-disabled-font-color: rgba(25, 25, 25, 0.2);
-  --weekend-disabled-font-color: rgba(218, 78, 68, 0.2);
-  --disabled-fill-color: rgba(235, 235, 235, 0.8);
+  --weekday-disabled-font-color: ButtonText;
+  --weekend-disabled-font-color: ButtonText;
+  --disabled-fill-color: ButtonShadow;
 
   --disabled-opacity: 0.2;
 }
 
 html {
   font-size: 10px;
 }
 
@@ -69,26 +69,29 @@ button {
   height: 2.4rem;
   margin-bottom: 0.8rem;
   justify-content: space-between;
 }
 
 .nav > button {
   width: 3rem;
   height: var(--date-picker-item-height);
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 .nav > button:hover {
   fill: var(--button-font-color-hover);
+  fill-opacity: .8;
 }
 
 .nav > button.active {
   fill: var(--button-font-color-active);
+  fill-opacity: 1;
 }
 
 .nav > button.prev,
 .nav > button.next:dir(rtl) {
   background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
 }
 
 .nav > button.next,
@@ -129,18 +132,19 @@ button.month-year.active {
 }
 
 button.month-year::after {
   position: absolute;
   content: "";
   width: 2.6rem;
   height: 1.6rem;
   background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 button.month-year.active::after {
   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .month-year-view {
   position: absolute;
@@ -204,16 +208,17 @@ button.month-year.active::after {
 }
 
 .week-header {
   display: flex;
 }
 
 .week-header > div {
   color: var(--weekday-header-font-color);
+  opacity: .5;
 }
 
 .week-header > div.weekend {
   color: var(--weekend-header-font-color);
 }
 
 .days-viewport {
   height: 15rem;
@@ -235,24 +240,26 @@ button.month-year.active::after {
   height: var(--date-picker-item-height);
   position: relative;
   justify-content: center;
   width: var(--date-picker-item-width);
 }
 
 .days-view > .outside {
   color: var(--weekday-outside-font-color);
+  opacity: .5;
 }
 
 .days-view > .weekend {
   color: var(--weekend-font-color);
 }
 
 .days-view > .weekend.outside {
   color: var(--weekend-outside-font-color);
+  opacity: .5;
 }
 
 .days-view > .out-of-range,
 .days-view > .off-step {
   color: var(--weekday-disabled-font-color);
   background: var(--disabled-fill-color);
 }
 
@@ -289,26 +296,29 @@ button.month-year.active::after {
 .spinner-container {
   display: flex;
   flex-direction: column;
   width: var(--spinner-width);
 }
 
 .spinner-container > button {
   height: var(--spinner-button-height);
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 .spinner-container > button:hover {
   fill: var(--button-font-color-hover);
+  fill-opacity: .8;
 }
 
 .spinner-container > button.active {
   fill: var(--button-font-color-active);
+  fill-opacity: 1;
 }
 
 .spinner-container > button.up {
   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .spinner-container > button.down {
   background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;

--- a/toolkit/themes/shared/icons/calendar-arrow-left.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-left.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
      width="14" height="14" viewBox="0 0 14 14">
-  <path fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
 </svg>

--- a/toolkit/themes/shared/icons/calendar-arrow-right.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-right.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
      width="14" height="14" viewBox="0 0 14 14">
-  <path fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
 </svg>

deleted file mode 100644
--- a/toolkit/themes/shared/icons/input-clear.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
- <!-- This Source Code Form is subject to the terms of the Mozilla Public
-    - License, v. 2.0. If a copy of the MPL was not distributed with this
-    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
-  <style>
-    .st0 {
-      fill: #858585;
-    }
-    .st1 {
-      fill: #FFFFFF;
-    }
-  </style>
-  <circle id="Combined-Shape" class="st0" cx="6" cy="6" r="6"/>
-  <polygon id="Close_Button_-_Normal-path" class="st1" points="9,8.1 8.1,9 6,6.9 3.9,9 3,8.1 5.1,6 3,3.9 3.9,3 6,5.1 8.1,3 9,3.9 6.9,6"/>
-</svg>

--- a/toolkit/themes/shared/icons/spinner-arrow-down.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-down.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
      width="10" height="6" viewBox="0 0 10 6">
-  <path fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
 </svg>

--- a/toolkit/themes/shared/icons/spinner-arrow-up.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-up.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
      width="10" height="6" viewBox="0 0 10 6">
-  <path fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
 </svg>

--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -31,17 +31,16 @@ toolkit.jar:
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
   skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
   skin/classic/global/icons/error.svg                      (../../shared/icons/error.svg)
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
-  skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/resizer.svg                    (../../shared/icons/resizer.svg)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
   skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)

--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -15,19 +15,22 @@
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
-  --arrowpanel-background: -moz-field;
-  --arrowpanel-color: -moz-FieldText;
-  --arrowpanel-border-color: ThreeDShadow;
+  --default-arrowpanel-background: -moz-field;
+  --default-arrowpanel-color: -moz-fieldText;
+  --default-arrowpanel-border-color: ThreeDShadow;
+  --arrowpanel-background: var(--default-arrowpanel-background);
+  --arrowpanel-color: var(--default-arrowpanel-color);
+  --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --panel-disabled-color: GrayText;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --arrowpanel-border-color: hsla(210,4%,10%,.2);
   }
 }