--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -1,23 +1,33 @@
 /* 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/ */
 
-/**
- * This is the stylesheet of the Box Model view implemented in the layout panel.
- */
+:root {
+  --marginbox-color: #FDFFDF;
+  --borderbox-color: var(--grey-50);
+  --paddingbox-color: #E3DCFF;
+  --contentbox-color: #CFF0FB;
+  --marginbox-border-color: #D8E60A;
+  --contentbox-border-color: #54A9FF;
+  --position-border-color: var(--grey-50);
+}
+
+:root.theme-dark {
+  --marginbox-color: #73764A;
+  --borderbox-color: var(--grey-70);
+  --paddingbox-color: #6657A6;
+  --contentbox-color: #407AA4;
+  --marginbox-border-color: #BDCA00;
+  --contentbox-border-color: #00B8FF;
+  --position-border-color: var(--grey-40);
+}
 
 .boxmodel-container {
-  --marginbox-color: #fdffdf;
-  --borderbox-color: var(--grey-50);
-  --paddingbox-color: #e3dcff;
-  --contentbox-color: #cff0fb;
-  --marginbox-border-color: #d8e60a;
-  --contentbox-border-color: #54A9FF;
   overflow: auto;
   padding-bottom: 4px;
   max-width: 600px;
   margin: 0 auto;
 }
 
 /* Header */
 
@@ -55,18 +65,24 @@
 
 .boxmodel-position,
 .boxmodel-margin,
 .boxmodel-padding {
   color: var(--grey-50);
 }
 
 .theme-dark .boxmodel-margin,
+.theme-dark .boxmodel-border,
+.theme-dark .boxmodel-padding,
 .theme-dark .boxmodel-size {
-  color: var(--grey-60);
+  color: var(--grey-10);
+}
+
+.theme-dark .boxmodel-position {
+  color: var(--grey-30);
 }
 
 /* Regions are 3 nested elements with wide borders and outlines */
 
 .boxmodel-contents {
   height: 18px;
   outline: dashed 1px var(--contentbox-border-color);
 }
@@ -236,24 +252,24 @@
   width: auto;
   height: 30px;
 }
 
 /* Box Model Positioning: contains top, right, bottom, left */
 
 .boxmodel-position.boxmodel-top,
 .boxmodel-position.boxmodel-bottom {
-  border-left: 1px solid var(--grey-50);
+  border-left: 1px solid var(--position-border-color);
   left: calc(50% - 2px);
   padding-left: 1px;
 }
 
 .boxmodel-position.boxmodel-right,
 .boxmodel-position.boxmodel-left {
-  border-top: 1px solid var(--grey-50);
+  border-top: 1px solid var(--position-border-color);
   line-height: 15px;
   top: calc(50% - 1px);
   width: 30px;
 }
 
 .boxmodel-position.boxmodel-top {
   top: -18px;
 }
@@ -299,16 +315,26 @@
   height: 15px;
   padding-top: 1px;
   padding-left: 4px;
   padding-right: 4px;
   border-radius: 3px;
   margin: 0px 0px;
 }
 
+.theme-dark .boxmodel-legend[data-box="margin"],
+.theme-dark .boxmodel-legend[data-box="border"],
+.theme-dark .boxmodel-legend[data-box="padding"] {
+  color: var(--grey-10);
+}
+
+.theme-dark .boxmodel-legend[data-box="position"] {
+  color: var(--grey-30);
+}
+
 /* Editable fields */
 
 .boxmodel-editable {
   position: relative;
   border: 1px dashed transparent;
   -moz-user-select: none;
   white-space: nowrap;
 }