Bug 1187696 - Toolbar too bright in Reader dark mode r=Gijs
authorakshitha <akshithashetty84@gmail.com>
Tue, 23 Apr 2019 16:13:27 +0000
changeset 470509 8ab68eea15b8e9585d0dd3ffd7f499b39a808dcb
parent 470508 7f72db694e4f7a582e836e77eb4f32e373ade2b5
child 470510 17b4c383ffbd54407ed6b16de81881c2bace8ca2
push id35906
push useraciure@mozilla.com
push dateTue, 23 Apr 2019 22:14:56 +0000
treeherdermozilla-central@0ce3633f8b80 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1187696
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1187696 - Toolbar too bright in Reader dark mode r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D26331
toolkit/themes/shared/aboutReader.css
toolkit/themes/shared/narrate.css
toolkit/themes/shared/narrate/arrow.svg
toolkit/themes/shared/narrate/fast.svg
toolkit/themes/shared/narrate/slow.svg
toolkit/themes/shared/narrate/start.svg
toolkit/themes/shared/narrate/stop.svg
toolkit/themes/shared/narrate/waveform.svg
toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
toolkit/themes/shared/reader/RM-Minus-24x24.svg
toolkit/themes/shared/reader/RM-Plus-24x24.svg
toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -1,14 +1,38 @@
 /* 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/. */
 
 /* Avoid adding ID selector rules in this style sheet, since they could
  * inadvertently match elements in the article content. */
+:root {
+   --close-button-hover: #d94141;
+}
+body {
+  --toolbar-bgcolor: #fbfbfb;
+  --toolbar-border: #b5b5b5;
+  --toolbar-hover: #ebebeb;
+  --popup-bgcolor: #fbfbfb;
+  --popup-border: #b5b5b5;
+  --font-color: #4c4c4c;
+  --icon-fill: #808080;
+  /* light colours */
+}
+
+body.dark {
+  --toolbar-bgcolor: #2a2a2d;
+  --toolbar-border: #4B4A50;
+  --toolbar-hover: #737373;
+  --popup-bgcolor: #4b4a50;
+  --popup-border: #65646a;
+  --font-color: #fff;
+  --icon-fill: #fff;
+  /* dark colours */
+}
 
 body {
   padding: 64px 51px;
 }
 
 body.loaded {
   transition: color 0.4s, background-color 0.4s;
 }
@@ -210,42 +234,47 @@ body:not(.loaded) .toolbar:-moz-locale-d
   font-family: Helvetica, Arial, sans-serif;
   position: fixed;
   height: 100%;
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: #fbfbfb;
+  background-color:  var(--toolbar-bgcolor);
   -moz-user-select: none;
-  border-right: 1px solid #b5b5b5;
+  border-right: 1px solid  var(--toolbar-border);
   z-index: 1;
 }
 
 .button {
   display: block;
   background-size: 24px 24px;
   background-repeat: no-repeat;
   color: #333;
-  background-color: #fbfbfb;
+  background-color: var(--toolbar-bgcolor);
   height: 40px;
   padding: 0;
 }
 
+button {
+  -moz-context-properties: fill;
+  color: var(--font-color);
+  fill: var(--icon-fill);
+}
+
 .toolbar .button {
   width: 40px;
   background-position: center;
   margin-right: -1px;
   border-top: 0;
   border-left: 0;
-  border-right: 1px solid #b5b5b5;
-  border-bottom: 1px solid #c1c1c1;
-  -moz-context-properties: fill;
-  fill: #808080;
+  border-right: 1px solid var(--toolbar-border);
+  border-bottom: 1px solid var(--toolbar-border);
+  background-color:  var(--toolbar-bgcolor);
 }
 
 .button[hidden] {
   display: none;
 }
 
 .dropdown {
   text-align: center;
@@ -262,20 +291,20 @@ body:not(.loaded) .toolbar:-moz-locale-d
 /*======= Popup =======*/
 
 .dropdown-popup {
   min-width: 300px;
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
-  background-color: #fbfbfb;
+  background-color: var(--popup-bgcolor);
   visibility: hidden;
   border-radius: 4px;
-  border: 1px solid #b5b5b5;
+  border: 1px solid var(--popup-border);
   border-bottom-width: 0;
   box-shadow: 0 1px 3px #c1c1c1;
 }
 
 .keep-open .dropdown-popup {
   z-index: initial;
 }
 
@@ -290,18 +319,22 @@ body:not(.loaded) .toolbar:-moz-locale-d
 .dropdown-arrow {
   position: absolute;
   top: 30px; /* offset arrow from top of popup */
   left: -16px;
   width: 16px;
   height: 24px;
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
   display: block;
+  -moz-context-properties:  fill, stroke;
+  fill: var(--popup-bgcolor);
+  stroke: var(--popup-border);
 }
 
+
 /*======= Font style popup =======*/
 
 .font-type-buttons,
 .font-size-buttons,
 .color-scheme-buttons,
 .content-width-buttons,
 .line-height-buttons {
   display: flex;
@@ -331,18 +364,18 @@ body:not(.loaded) .toolbar:-moz-locale-d
 }
 
 .font-type-buttons > button,
 .font-size-buttons > button,
 .content-width-buttons > button,
 .line-height-buttons > button {
   width: 50%;
   background-color: transparent;
-  border-left: 1px solid #B5B5B5;
-  border-bottom: 1px solid #B5B5B5;
+  border-left: 1px solid var(--popup-border);
+  border-bottom: 1px solid var(--popup-border);
 }
 
 .color-scheme-buttons > button {
   width: 33.33%;
   font-size: 14px;
 }
 
 .color-scheme-buttons > .dark-button {
@@ -379,17 +412,16 @@ body:not(.loaded) .toolbar:-moz-locale-d
 
 .font-type-buttons > button:active:hover,
 .font-type-buttons > button.selected {
   border-bottom: 1px solid #FC6420;
 }
 
 /* Make the serif button content the same size as the sans-serif button content. */
 .font-type-buttons > button > .description {
-  color: #666;
   font-size: 12px;
   margin-top: -5px;
 }
 
 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
 %ifdef XP_MACOSX
 .font-type-buttons > .sans-serif-button > .name {
   margin-top: 10px;
@@ -428,17 +460,17 @@ body:not(.loaded) .toolbar:-moz-locale-d
 }
 %endif
 
 .button:hover,
 .font-size-buttons > button:hover,
 .font-type-buttons > button:hover,
 .content-width-buttons > button:hover,
 .line-height-buttons > button:hover {
-  background-color: #ebebeb;
+  background-color: var(--toolbar-hover);
 }
 
 .dropdown.open,
 .button:active,
 .font-size-buttons > button:active,
 .font-size-buttons > button.selected,
 .content-width-buttons > button:active,
 .content-width-buttons > button.selected,
@@ -470,19 +502,19 @@ body:not(.loaded) .toolbar:-moz-locale-d
 .close-button {
   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
   height: 68px;
   background-position: center 8px;
 }
 
 .close-button:hover {
   fill: #fff;
-  background-color: #d94141;
-  border-bottom: 1px solid #d94141;
-  border-right: 1px solid #d94141;
+  background-color: var(--close-button-hover);
+  border-bottom: 1px solid var(--close-button-hover);
+  border-right: 1px solid var(--close-button-hover);
 }
 
 .close-button:hover:active {
   background-color: #AE2325;
   border-bottom: 1px solid #AE2325;
   border-right: 1px solid #AE2325;
 }
 
--- a/toolkit/themes/shared/narrate.css
+++ b/toolkit/themes/shared/narrate.css
@@ -45,16 +45,21 @@ body.sepia .narrate-word-highlight {
 }
 
 body.dark .narrate-word-highlight {
   border-bottom-color: #6f6f6f;
 }
 
 .narrate-dropdown {
   --border-color: #e5e5e5;
+  --current-voice: #7f7f7f;
+}
+.dark .narrate-dropdown {
+  --border-color: #65646a;
+  --current-voice: #a09eac;
 }
 
 .narrate-toggle {
   margin: 0;
   background-image: url("chrome://global/skin/narrate/waveform.svg");
 }
 
 .speaking .narrate-toggle {
@@ -62,17 +67,17 @@ body.dark .narrate-word-highlight {
   background-image: url("chrome://global/skin/narrate/waveform.svg#waveform");
 }
 
 .narrate-dropdown > .dropdown-popup button {
   background-color: transparent;
 }
 
 .narrate-dropdown > .dropdown-popup button:hover:not(:disabled) {
-  background-color: #eaeaea;
+  background-color: var(--toolbar-hover);
 }
 
 .narrate-row {
   display: flex;
   align-items: center;
   min-height: 40px;
   box-sizing: border-box;
 }
@@ -129,43 +134,48 @@ body.dark .narrate-word-highlight {
 
 .narrate-rate::before, .narrate-rate::after {
   content: '';
   width: 48px;
   height: 40px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 24px auto;
+  -moz-context-properties: fill;
+  fill: var(--icon-fill);
 }
 
 .narrate-rate::before {
   background-image: url("chrome://global/skin/narrate/slow.svg");
 }
 
 .narrate-rate::after {
   background-image: url("chrome://global/skin/narrate/fast.svg");
 }
 
 .narrate-rate-input {
   margin: 0 1px;
   flex-grow: 1;
 }
+.narrate-rate-input {
+  background-color: var(--popup-bgcolor);
+}
 
 .narrate-rate-input::-moz-range-track {
-  background-color: #979797;
+  background-color: var(--icon-fill);
   height: 2px;
 }
 
 .narrate-rate-input::-moz-range-progress {
   background-color: #2EA3FF;
   height: 2px;
 }
 
 .narrate-rate-input::-moz-range-thumb {
-  background-color: #808080;
+  background-color: var(--icon-fill);
   height: 16px;
   width: 16px;
   border-radius: 8px;
   border-width: 0;
 }
 
 .narrate-rate-input:active::-moz-range-thumb {
   background-color: #2EA3FF;
@@ -208,16 +218,20 @@ body.dark .narrate-word-highlight {
 .voiceselect > .options > button.option  {
   box-sizing: border-box;
 }
 
 .voiceselect > .options:not(.hovering) > button.option:focus {
   background-color: #eaeaea;
 }
 
+body.dark .voiceselect > .options:not(.hovering) > button.option:focus {
+  background-color: var(--toolbar-hover);
+}
+
 .voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
   background-color: transparent;
 }
 
 .voiceselect > .options > button.option::-moz-focus-inner {
   outline: none;
   border: 0;
 }
@@ -227,15 +241,15 @@ body.dark .narrate-word-highlight {
   overflow-y: auto;
 }
 
 .voiceselect.open > .options {
   display: block;
 }
 
 .current-voice {
-  color: #7f7f7f;
+  color: var(--current-voice);
 }
 
 .voiceselect:not(.open) > button,
 .voiceselect .option:last-child {
   border-radius: 0 0 3px 3px;
 }
--- a/toolkit/themes/shared/narrate/arrow.svg
+++ b/toolkit/themes/shared/narrate/arrow.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12">
-  <path d="M6 9L1 4l1-1 4 4 4-4 1 1z" fill="#4C4C4C"/>
+  <path fill="context-fill" d="M6 9L1 4l1-1 4 4 4-4 1 1z"/>
 </svg>
--- a/toolkit/themes/shared/narrate/fast.svg
+++ b/toolkit/themes/shared/narrate/fast.svg
@@ -1,3 +1,3 @@
 <svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20.4">
-    <path fill="gray" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/>
+    <path fill="context-fill" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/>
 </svg>
--- a/toolkit/themes/shared/narrate/slow.svg
+++ b/toolkit/themes/shared/narrate/slow.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <g fill="gray">
+    <g fill="context-fill">
         <path d="M1.684,13.486c-0.209,0-0.404-0.132-0.474-0.341c-0.528-1.58-0.23-5.767,4.097-7.921 c1.315-0.656,2.589-0.988,3.787-0.988c3.237,0,5.096,2.341,5.99,3.465c0.158,0.199,0.181,0.533,0,0.713 c-0.793,0.794-1.852,1.542-3.231,2.286c-2.46,1.327-5.045,1.775-7.121,2.134c-1.123,0.194-2.093,0.361-2.89,0.627 C1.789,13.479,1.735,13.486,1.684,13.486L1.684,13.486z"/>
         <path d="M23.185,5.465c-0.86-1.121-2.074-1.819-3.168-1.819c-0.641,0-1.556,0.23-2.273,1.328 c-0.374,0.571-0.577,1.161-0.773,1.73c-0.512,1.482-1.041,3.016-4.662,4.969c-2.316,1.249-4.707,1.664-6.815,2.03 c-2.524,0.438-4.704,0.814-5.455,2.622c-0.069,0.165-0.045,0.354,0.062,0.495c0.107,0.143,0.281,0.217,0.46,0.193 c0.667-0.081,1.533,0.041,2.434,0.217c-0.122,0.146-0.261,0.286-0.391,0.418c-0.38,0.385-0.774,0.783-0.657,1.292 c0.108,0.474,0.604,0.699,0.966,0.828c0.399,0.142,0.843,0.217,1.283,0.217c1.241,0,2.216-0.579,2.649-1.539 c1.704,0.287,3.487,0.313,5.043,0.313l1.639-0.006c0.066,0.056,0.178,0.166,0.264,0.25c0.504,0.506,1.348,1.351,2.721,1.351 c0.129,0,0.264-0.008,0.416-0.026c0.687-0.102,1.351-0.267,1.574-0.787c0.227-0.528-0.123-1.023-0.526-1.597 c-0.481-0.685-1.08-1.532-0.998-2.652c0.196-0.397,0.368-0.824,0.546-1.267c0.479-1.19,0.975-2.421,2.12-3.513 c0.431,0.343,1.022,0.549,1.63,0.549l0,0c0.439,0,0.876-0.102,1.295-0.3c0.624-0.293,1.104-0.967,1.316-1.847 C24.175,7.707,23.914,6.418,23.185,5.465L23.185,5.465z M20.397,7.757c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5 c0.275,0,0.5,0.224,0.5,0.5S20.674,7.757,20.397,7.757z"/>
     </g>
 </svg>
--- a/toolkit/themes/shared/narrate/start.svg
+++ b/toolkit/themes/shared/narrate/start.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="gray"/>
+    <path d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="context-fill"/>
 </svg>
--- a/toolkit/themes/shared/narrate/stop.svg
+++ b/toolkit/themes/shared/narrate/stop.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="gray"/>
+    <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="context-fill"/>
 </svg>
--- a/toolkit/themes/shared/narrate/waveform.svg
+++ b/toolkit/themes/shared/narrate/waveform.svg
@@ -8,17 +8,17 @@
     0%   { transform: scaleY(1);   }
     15%  { transform: scaleY(1.5); }
     15%  { transform: scaleY(1.5); }
     30%  { transform: scaleY(1);   }
     100% { transform: scaleY(1);   }
   }
 
   .waveform > rect {
-    fill: #808080;
+    fill: context-fill;
   }
 
   /* Only animate if we're using a hash to address the SVG */
   g:target > rect {
     fill: #58bf43;
     transform-box: fill-box;
     transform-origin: 50% 50%;
     animation-name: grow;
--- a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
@@ -3,14 +3,14 @@
 <!-- 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="42"
      height="16"
      viewBox="0 0 42 16"
-     fill="#808080">
+     fill="context-fill">
 
   <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z"/>
   <path d="M38.5,7 L32.75,1.25 L34,6.58831647e-15 L42,8 L41.375,8.625 L34,16 L32.75,14.75 L38.5,9 L24,9 L24,7 L38.5,7 Z" transform="translate(33.000000, 8.000000) scale(-1, 1) translate(-33.000000, -8.000000)"/>
 
 </svg>
--- a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
@@ -3,14 +3,14 @@
 <!-- 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="44"
      height="16"
      viewBox="0 0 44 16"
-     fill="#808080">
+     fill="context-fill">
 
   <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z" transform="translate(9.000000, 8.000000) scale(-1, 1) translate(-9.000000, -8.000000)"/>
   <path d="M40.5,7 L34.75,1.25 L36,-5.17110888e-16 L44,8 L43.375,8.625 L36,16 L34.75,14.75 L40.5,9 L26,9 L26,7 L40.5,7 Z"/>
 
 </svg>
--- a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
@@ -1,17 +1,18 @@
 <?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"
      width="38"
      height="14"
      viewBox="0 0 38 14"
-     fill="#808080">
+     fill="context-fill">
 
   <rect x="0" y="0" width="28" height="2"/>
   <rect x="0" y="6" width="38" height="2"/>
   <rect x="0" y="12" width="18" height="2"/>
 
 </svg>
--- a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
@@ -3,15 +3,15 @@
 <!-- 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="38"
      height="24"
      viewBox="0 0 38 24"
-     fill="#808080">
+     fill="context-fill">
 
   <rect x="0" y="0" width="28" height="2"/>
   <rect x="0" y="11" width="38" height="2"/>
   <rect x="0" y="22" width="18" height="2"/>
 
 </svg>
--- a/toolkit/themes/shared/reader/RM-Minus-24x24.svg
+++ b/toolkit/themes/shared/reader/RM-Minus-24x24.svg
@@ -1,7 +1,7 @@
 <?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 24 24">
-  <path fill-rule="evenodd" fill="#808080" d="M0,13.5v-3h24v3H0z"/>
+  <path fill-rule="evenodd" fill="context-fill" d="M0,13.5v-3h24v3H0z"/>
 </svg>
--- a/toolkit/themes/shared/reader/RM-Plus-24x24.svg
+++ b/toolkit/themes/shared/reader/RM-Plus-24x24.svg
@@ -1,7 +1,7 @@
 <?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 24 24">
-  <path fill-rule="evenodd" fill="#808080" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
+  <path fill-rule="evenodd" fill="context-fill" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
 </svg>
--- a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
@@ -1,8 +1,8 @@
 <?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 16 24">
-  <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98 16.58 0.01" fill="#b5b5b5"/>
-  <polyline points="16.63 1.51 6.08 12.01 16.63 22.5" fill="#fbfbfb"/>
+  <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98 16.58 0.01" fill="context-fill" stroke="context-stroke"/>
+  <polyline points="16.63 1.51 6.08 12.01 16.63 22.5" fill="context-fill" stroke="context-stroke"/>
 </svg>