--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,26 +1,28 @@
 /* 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/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
-.theme-light {
+:root {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
+  --rule-shape-toggle-color: var(--grey-90);
 }
 
-.theme-dark {
+:root.theme-dark {
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #141416;
+  --rule-shape-toggle-color: var(--grey-10);
 }
 
-.theme-firebug {
+:root.theme-firebug {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-property-name: darkgreen;
   --rule-property-value: darkblue;
   --rule-overridden-item-border-color: var(--theme-content-color2);
   --rule-header-background-color: var(--theme-header-background);
 }
 
 /* Rule View Tabpanel */
@@ -467,16 +469,18 @@
 
 .ruleview-grid {
   background: url("chrome://devtools/skin/images/grid.svg");
   border-radius: 0;
 }
 
 .ruleview-shape {
   background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
+  -moz-context-properties: fill;
+  fill: var(--rule-shape-toggle-color);
   border-radius: 0;
   background-size: 1em;
 }
 
 .ruleview-shape-point.active {
   background-color: var(--rule-highlight-background-color);
 }