--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -9,16 +9,24 @@
   This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
   pseudo-class is important.
   Having bug 1086532 fixed would make it possible to load this stylesheet in a
   <style scoped> node instead, directly in the native anonymous container
   element.
 */
 
 :-moz-native-anonymous .highlighter-container {
+  --highlighter-guide-color: #08c;
+  --highlighter-content-color: #87ceeb;
+  --highlighter-bubble-text-color: hsl(216, 33%, 97%);
+  --highlighter-bubble-background-color: hsl(214, 13%, 24%);
+  --highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
+}
+
+:-moz-native-anonymous .highlighter-container {
   position: fixed;
   width: 100%;
   height: 100%;
   /* The container for all highlighters doesn't react to pointer-events by
      default. This is because most highlighters cover the whole viewport but
      don't contain UIs that need to be accessed.
      If your highlighter has UI that needs to be interacted with, add
      'pointer-events:auto;' on its container element. */
@@ -41,17 +49,17 @@
 
 /* Box model regions can be faded (see the onlyRegionArea option in
    highlighters.js) in order to only display certain regions. */
 :-moz-native-anonymous .box-model-regions [faded] {
   display: none;
 }
 
 :-moz-native-anonymous .box-model-content {
-  fill: #87ceeb;
+  fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .box-model-padding {
   fill: #6a5acd;
 }
 
 :-moz-native-anonymous .box-model-border {
   fill: #444444;
@@ -67,17 +75,17 @@
 :-moz-native-anonymous .box-model-margin {
   stroke: none;
 }
 
 :-moz-native-anonymous .box-model-guide-top,
 :-moz-native-anonymous .box-model-guide-right,
 :-moz-native-anonymous .box-model-guide-bottom,
 :-moz-native-anonymous .box-model-guide-left {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   shape-rendering: crispEdges;
 }
 
 /* Highlighter - Node Infobar */
 
 :-moz-native-anonymous .box-model-nodeinfobar-container {
   position: absolute;
@@ -92,38 +100,38 @@
 
   /* Centering the nodeinfobar in the container */
   left: -50%;
 
   padding: 5px;
   min-width: 75px;
 
   border-radius: 3px;
-  background: hsl(214,13%,24%) no-repeat padding-box;
+  background: var(--highlighter-bubble-background-color) no-repeat padding-box;
 
-  color: hsl(216,33%,97%);
+  color: var(--highlighter-bubble-text-color);
   text-shadow: none;
 
-  border: 1px solid rgba(255,255,255,0.2);
+  border: 1px solid var(--highlighter-bubble-border-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
   margin: 7px 0;
 }
 
 /* Arrows */
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
   left: calc(50% - 8px);
-  border: 8px solid rgba(255,255,255,0.2);
+  border: 8px solid var(--highlighter-bubble-border-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:after {
   left: calc(50% - 7px);
-  border: 7px solid hsl(214,13%,24%);
+  border: 7px solid var(--highlighter-bubble-background-color);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before,
 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:after {
   content: "";
   display: none;
   position: absolute;
   height: 0;
@@ -152,94 +160,94 @@
   overflow: hidden;
   white-space: nowrap;
   direction: ltr;
   text-align: center;
   padding-bottom: 1px;
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-tagname {
-  color: hsl(285,100%,75%);
+  color: hsl(285,100%, 75%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-id {
-  color: hsl(103,46%,54%);
+  color: hsl(103, 46%, 54%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-classes,
 :-moz-native-anonymous .box-model-nodeinfobar-pseudo-classes {
-  color: hsl(200,74%,57%);
+  color: hsl(200, 74%, 57%);
 }
 
 :-moz-native-anonymous .box-model-nodeinfobar-dimensions {
-  color: hsl(210,30%,85%);
+  color: hsl(210, 30%, 85%);
   border-inline-start: 1px solid #5a6169;
   margin-inline-start: 6px;
   padding-inline-start: 6px;
 }
 
 /* Css transform highlighter */
 
 :-moz-native-anonymous .css-transform-transformed {
-  fill: #80d4ff;
+  fill: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
 :-moz-native-anonymous .css-transform-untransformed {
   fill: #66cc52;
   opacity: 0.8;
 }
 
 :-moz-native-anonymous .css-transform-transformed,
 :-moz-native-anonymous .css-transform-untransformed,
 :-moz-native-anonymous .css-transform-line {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   stroke-width: 2;
 }
 
 /* Rect highlighter */
 
 :-moz-native-anonymous .highlighted-rect {
   position: absolute;
-  background: #80d4ff;
+  background: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
 /* Element geometry highlighter */
 
 :-moz-native-anonymous .geometry-editor-root {
   /* The geometry editor can be interacted with, so it needs to react to
      pointer events */
   pointer-events: auto;
   -moz-user-select: none;
 }
 
 :-moz-native-anonymous .geometry-editor-offset-parent {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   shape-rendering: crispEdges;
   stroke-dasharray: 5 3;
   fill: transparent;
 }
 
 :-moz-native-anonymous .geometry-editor-current-node {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-content-color);
   shape-rendering: crispEdges;
-  fill: #87ceeb;
   opacity: 0.6;
 }
 
 :-moz-native-anonymous .geometry-editor-arrow {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   shape-rendering: crispEdges;
 }
 
 :-moz-native-anonymous .geometry-editor-root circle {
-  stroke: #08c;
-  fill: #87ceeb;
+  stroke: var(--highlighter-guide-color);
+  fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .geometry-editor-handler-top,
 :-moz-native-anonymous .geometry-editor-handler-bottom {
   cursor: ns-resize;
 }
 
 :-moz-native-anonymous .geometry-editor-handler-right,
@@ -253,26 +261,26 @@
 :-moz-native-anonymous [dragging] .geometry-editor-handler-left {
   cursor: grabbing;
 }
 
 :-moz-native-anonymous .geometry-editor-handler-top.dragging,
 :-moz-native-anonymous .geometry-editor-handler-right.dragging,
 :-moz-native-anonymous .geometry-editor-handler-bottom.dragging,
 :-moz-native-anonymous .geometry-editor-handler-left.dragging {
-  fill: #08c;
+  fill: var(--highlighter-guide-color);
 }
 
 :-moz-native-anonymous .geometry-editor-label-bubble {
-  fill: hsl(214,13%,24%);
+  fill: var(--highlighter-bubble-background-color);
   shape-rendering: crispEdges;
 }
 
 :-moz-native-anonymous .geometry-editor-label-text {
-  fill: hsl(216,33%,97%);
+  fill: var(--highlighter-bubble-text-color);
   font: message-box;
   font-size: 10px;
   text-anchor: middle;
   dominant-baseline: middle;
 }
 
 /* Rules highlighter */
 
@@ -326,23 +334,23 @@
   left: 0;
   pointer-events: auto;
   cursor: crosshair;
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-root path {
   shape-rendering: crispEdges;
   fill: rgba(135, 206, 235, 0.6);
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   pointer-events: none;
 }
 
 :-moz-native-anonymous .dragging path {
   fill: rgba(135, 206, 235, 0.6);
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   opacity: 0.45;
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-size,
 :-moz-native-anonymous .measuring-tool-highlighter-label-position {
   position: absolute;
   top: 0;
   left: 0;
@@ -358,21 +366,22 @@
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-position {
   color: #fff;
   background: hsla(214, 13%, 24%, 0.8);
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-label-size {
-  color: hsl(216, 33%, 97%);
-  background: hsl(214, 13%, 24%);
+  color: var(--highlighter-bubble-text-color);
+  background: var(--highlighter-bubble-background-color);
+  border: 1px solid var(--highlighter-bubble-border-color);
   line-height: 1.5em;
 }
 
 :-moz-native-anonymous .measuring-tool-highlighter-guide-top,
 :-moz-native-anonymous .measuring-tool-highlighter-guide-right,
 :-moz-native-anonymous .measuring-tool-highlighter-guide-bottom,
 :-moz-native-anonymous .measuring-tool-highlighter-guide-left {
-  stroke: #08c;
+  stroke: var(--highlighter-guide-color);
   stroke-dasharray: 5 3;
   shape-rendering: crispEdges;
 }