--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -22,30 +22,22 @@
   --font-color: ButtonText;
   --fill-color: ThreeDFace;
 
   --today-fill-color: ThreeDShadow;
 
   --selected-font-color: HighlightText;
   --selected-fill-color: Highlight;
 
-  --button-font-color: ButtonText;
-  --button-font-color-hover: ButtonText;
-  --button-font-color-active: ButtonText;
   --button-fill-color-active: ButtonFace;
 
-  --weekday-header-font-color: ButtonText;
-  --weekend-header-font-color: -moz-activehyperlinktext;
-
+  /* Use -moz-activehyperlinktext to get a system color that
+     by default will be closest to Red */
   --weekend-font-color: -moz-activehyperlinktext;
-  --weekday-outside-font-color: ButtonText;
-  --weekend-outside-font-color: -moz-activehyperlinktext;
 
-  --weekday-disabled-font-color: ButtonText;
-  --weekend-disabled-font-color: ButtonText;
   --disabled-fill-color: ButtonShadow;
 
   --disabled-opacity: 0.2;
 }
 
 html {
   font-size: 10px;
 }
@@ -70,27 +62,25 @@ button {
   margin-bottom: 0.8rem;
   justify-content: space-between;
 }
 
 .nav > button {
   width: 3rem;
   height: var(--date-picker-item-height);
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--button-font-color);
+  fill: var(--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%;
 }
 
@@ -133,17 +123,17 @@ 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, fill-opacity;
-  fill: var(--button-font-color);
+  fill: var(--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 {
@@ -207,24 +197,19 @@ button.month-year.active::after {
   width: var(--calendar-width);
 }
 
 .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;
   overflow: hidden;
   position: relative;
 }
 
 .days-view {
   position: absolute;
@@ -239,40 +224,32 @@ button.month-year.active::after {
   display: flex;
   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 {
+.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);
 }
 
-.days-view > .out-of-range.weekend,
-.days-view > .off-step.weekend {
-  color: var(--weekend-disabled-font-color);
-}
-
 .days-view > .today {
   font-weight: bold;
 }
 
 .days-view > .out-of-range::before,
 .days-view > .off-step::before {
   display: none;
 }
@@ -297,27 +274,25 @@ button.month-year.active::after {
   display: flex;
   flex-direction: column;
   width: var(--spinner-width);
 }
 
 .spinner-container > button {
   height: var(--spinner-button-height);
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--button-font-color);
+  fill: var(--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 {