--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -26,61 +26,62 @@
 
 .coordinate-plane {
   width: 150px;
   height: 370px;
   margin: 0 auto;
   position: relative;
 }
 
-.theme-dark .coordinate-plane:before,
-.theme-dark .coordinate-plane:after {
-  border-color: #eee;
-}
-
 .control-point {
   position: absolute;
   z-index: 1;
   height: 10px;
   width: 10px;
   border: 0;
   background: #666;
   display: block;
   margin: -5px 0 0 -5px;
   outline: none;
   border-radius: 5px;
   padding: 0;
   cursor: pointer;
 }
 
 .display-wrap {
-  background: repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 15px) no-repeat, repeating-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 15px) no-repeat;
+  background:
+  repeating-linear-gradient(0deg,
+    transparent,
+    var(--bezier-grid-color) 0,
+    var(--bezier-grid-color) 1px,
+    transparent 1px,
+    transparent 15px) no-repeat,
+  repeating-linear-gradient(90deg,
+    transparent,
+    var(--bezier-grid-color) 0,
+    var(--bezier-grid-color) 1px,
+    transparent 1px,
+    transparent 15px) no-repeat;
   background-size: 100% 100%, 100% 100%;
   background-position: -2px 5px, -2px 5px;
 
   -moz-user-select: none;
 }
 
-.theme-dark .display-wrap {
-  background: repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 15px) no-repeat, repeating-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 15px) no-repeat;
-  background-size: 100% 100%, 100% 100%;
-  background-position: -2px 5px, -2px 5px;
-
-  -moz-user-select: none;
-}
 canvas.curve {
-  background: linear-gradient(-45deg, transparent 49.7%, rgba(0,0,0,.2) 49.7%, rgba(0,0,0,.2) 50.3%, transparent 50.3%) center no-repeat;
+  background:
+    linear-gradient(-45deg,
+      transparent 49.7%,
+      var(--bezier-diagonal-color) 49.7%,
+      var(--bezier-diagonal-color) 50.3%,
+      transparent 50.3%) center no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
 }
 
-.theme-dark canvas.curve {
-  background: linear-gradient(-45deg, transparent 49.7%, #eee 49.7%, #eee 50.3%, transparent 50.3%) center no-repeat;
-}
-
 /* Timing Function Preview Widget */
 
 .timing-function-preview {
   position: absolute;
   bottom: 20px;
   right: 45px;
   width: 150px;
 }
@@ -180,26 +181,22 @@ canvas.curve {
   cursor: pointer;
   width: 33.33%;
   margin: 5px 0px;
   text-align: center;
 }
 
 .preset canvas {
   display: block;
-  border: 1px solid #ccc;
+  border: 1px solid var(--theme-splitter-color);
   border-radius: 3px;
   background-color: var(--theme-body-background);
   margin: 0 auto;
 }
 
-.theme-dark .preset canvas {
-  border-color: #444e58;
-}
-
 .preset p {
   font-size: 80%;
   margin: 2px auto 0px auto;
   color: var(--theme-body-color-alt);
   text-transform: capitalize;
   text-overflow: ellipsis;
   overflow: hidden;
 }
@@ -207,13 +204,13 @@ canvas.curve {
 .active-preset p, .active-preset:hover p {
   color: var(--theme-body-color);
 }
 
 .preset:hover canvas {
   border-color: var(--theme-selection-background);
 }
 
-.active-preset canvas, .active-preset:hover canvas,
-.theme-dark .active-preset canvas, .theme-dark .preset:hover canvas {
+.active-preset canvas,
+.active-preset:hover canvas {
   background-color: var(--theme-selection-background-semitransparent);
   border-color: var(--theme-selection-background);
 }

--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -135,22 +135,16 @@
 }
 
 /* Fix the size of inputs */
 /* Especially needed on Linux where input are bigger */
 input {
   width: 8em;
 }
 
-.theme-light .add,
-.theme-light .remove-button,
-.theme-light #toggle-presets {
-  filter: invert(1);
-}
-
 .preset {
   display: flex;
   margin-bottom: 10px;
   cursor: pointer;
   padding: 3px 5px;
 
   flex-direction: row;
   flex-wrap: wrap;
@@ -171,20 +165,16 @@ input {
 .preset:hover {
   background: var(--theme-selection-background);
 }
 
 .preset:hover label, .preset:hover span {
   color: var(--theme-selection-color);
 }
 
-.theme-light .preset:hover .remove-button {
-  filter: invert(0);
-}
-
 .preset .remove-button {
   order: 2;
 }
 
 .preset span {
   flex: 2 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -235,11 +225,17 @@ input {
 .add {
   background: url(chrome://devtools/skin/images/add.svg);
 }
 
 #toggle-presets {
   background: url(chrome://devtools/skin/images/pseudo-class.svg);
 }
 
+.add,
+.remove-button,
+#toggle-presets {
+  filter: var(--icon-filter);
+}
+
 .show-presets #toggle-presets {
   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
 }

--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -1,13 +1,25 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
+/* Tooltip specific theme variables */
+
+.theme-dark {
+  --bezier-diagonal-color: #eee;
+  --bezier-grid-color: rgba(0, 0, 0, 0.2);
+}
+
+.theme-light {
+  --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
+  --bezier-grid-color: rgba(0, 0, 0, 0.05);
+}
+
 /* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
 
 .devtools-tooltip .panel-arrowcontent {
   padding: 4px;
 }
 
 .devtools-tooltip .panel-arrowcontainer {
   /* Reseting the transition used when panels are shown */