--- a/devtools/client/responsive.html/components/viewport-toolbar.js
+++ b/devtools/client/responsive.html/components/viewport-toolbar.js
@@ -30,17 +30,17 @@ module.exports = createClass({
       selectedDevice,
       onChangeViewportDevice,
       onResizeViewport,
       onRotateViewport,
     } = this.props;
 
     return dom.div(
       {
-        className: "viewport-toolbar",
+        className: "toolbar viewport-toolbar",
       },
       DeviceSelector({
         devices,
         selectedDevice,
         onChangeViewportDevice,
         onResizeViewport,
       }),
       dom.button({

--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -2,26 +2,24 @@
  * React component group on how to best handle CSS. */
 
 /**
  * CSS Variables specific to the responsive design mode
  */
 
 .theme-light {
   --box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
-  --viewport-color: var(--theme-splitter-color);
   --viewport-active-color: var(--theme-body-color);
   --viewport-selection-arrow: url("./images/select-arrow.svg#light");
   --viewport-selection-arrow-selected:
     url("./images/select-arrow.svg#light-selected");
 }
 
 .theme-dark {
   --box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
-  --viewport-color: var(--theme-body-color);
   --viewport-active-color: var(--theme-selection-color);
   --viewport-selection-arrow: url("./images/select-arrow.svg#dark");
   --viewport-selection-arrow-selected:
     url("./images/select-arrow.svg#dark-selected");
 }
 
 * {
   box-sizing: border-box;
@@ -43,19 +41,24 @@ body {
   /* Center the viewports container */
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
 /**
- * Common style for toolbar buttons
+ * Common style for toolbars and toolbar buttons
  */
 
+.toolbar {
+  background-color: var(--theme-toolbar-background);
+  border: 1px solid var(--theme-splitter-color);
+}
+
 .toolbar-button {
   margin: 1px 3px;
   width: 16px;
   height: 16px;
   /* Reset styles from .devtools-button */
   min-width: initial;
   min-height: initial;
   align-self: center;
@@ -65,20 +68,17 @@ body {
   filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
 }
 
 /**
  * Global Toolbar
  */
 
 #global-toolbar {
-  background-color: var(--theme-toolbar-background);
-  border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
-  color: var(--theme-body-color-alt);
   box-shadow: var(--box-shadow);
   margin: 30px 0;
   padding: 4px 5px;
   display: inline-flex;
   -moz-user-select: none;
 }
 
 #global-toolbar > .title {
@@ -131,34 +131,33 @@ body {
   position: relative;
 }
 
 /**
  * Viewport Toolbar
  */
 
 .viewport-toolbar {
-  background-color: var(--theme-toolbar-background);
-  border-bottom: 1px solid var(--theme-splitter-color);
-  color: var(--theme-body-color);
+  border-width: 0;
+  border-bottom-width: 1px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   height: 18px;
 }
 
 .viewport-device-selector {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   background-position: 136px;
   background-repeat: no-repeat;
   background-size: 7px;
   border: none;
-  color: var(--viewport-color);
+  color: var(--theme-body-color-inactive);
   height: 100%;
   padding: 0 16px;
   text-align: center;
   text-overflow: ellipsis;
   width: 150px;
 }
 
 .viewport-device-selector.selected {
@@ -250,17 +249,17 @@ body {
 }
 
 .viewport-dimension-editable {
   border-bottom: 1px solid transparent;
 }
 
 .viewport-dimension-editable,
 .viewport-dimension-input {
-  color: var(--viewport-color);
+  color: var(--theme-body-color-inactive);
   transition: all 0.25s ease;
 }
 
 .viewport-dimension-editable.editing,
 .viewport-dimension-input.editing {
   color: var(--viewport-active-color);
 }
 

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -24,16 +24,17 @@
   --theme-selection-background: #4c9ed9;
   --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: #dde1e4;
   --theme-comment: #696969;
 
   --theme-body-color: #393f4c;
   --theme-body-color-alt: #585959;
+  --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #0088cc;
   --theme-highlight-bluegrey: #0072ab;
   --theme-highlight-purple: #5b5fff;
@@ -65,16 +66,17 @@
   --theme-selection-background: #1d4f73;
   --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: black;
   --theme-comment: #757873;
 
   --theme-body-color: #8fa1b2;
   --theme-body-color-alt: #b6babf;
+  --theme-body-color-inactive: #8fa1b2;
   --theme-content-color1: #a9bacb;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #5f7387;
 
   --theme-highlight-green: #70bf53;
   --theme-highlight-blue: #46afe3;
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-purple: #6b7abb;