--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -145,18 +145,19 @@ devtools.jar:
     content/eyedropper/eyedropper.xul (eyedropper/eyedropper.xul)
     content/eyedropper/crosshairs.css (eyedropper/crosshairs.css)
     content/eyedropper/nocursor.css (eyedropper/nocursor.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging/aboutdebugging.js (aboutdebugging/aboutdebugging.js)
 %   skin devtools classic/1.0 %skin/
 *   skin/themes/common.css (themes/common.css)
-*   skin/themes/dark-theme.css (themes/dark-theme.css)
-*   skin/themes/light-theme.css (themes/light-theme.css)
+    skin/themes/dark-theme.css (themes/dark-theme.css)
+    skin/themes/light-theme.css (themes/light-theme.css)
+    skin/themes/toolbars.css (themes/toolbars.css)
     skin/themes/variables.css (themes/variables.css)
     skin/themes/images/add.svg (themes/images/add.svg)
     skin/themes/images/filters.svg (themes/images/filters.svg)
     skin/themes/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/themes/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/themes/images/controls.png (themes/images/controls.png)
     skin/themes/images/controls@2x.png (themes/images/controls@2x.png)
     skin/themes/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)

--- a/devtools/client/shared/test/browser.ini
+++ b/devtools/client/shared/test/browser.ini
@@ -129,8 +129,9 @@ skip-if = e10s # Bug 1086492 - Disable t
 [browser_toolbar_basic.js]
 [browser_toolbar_tooltip.js]
 [browser_toolbar_webconsole_errors_count.js]
 skip-if = buildapp == 'mulet' || e10s # The developertoolbar error count isn't correct with e10s
 [browser_treeWidget_basic.js]
 [browser_treeWidget_keyboard_interaction.js]
 [browser_treeWidget_mouse_interaction.js]
 [browser_devices.js]
+[browser_theme_switching.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/test/browser_theme_switching.js
@@ -0,0 +1,32 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+var toolbox;
+
+add_task(function*() {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = yield gDevTools.showToolbox(target);
+  let root = toolbox.frame.contentDocument.documentElement;
+
+  let platform = root.getAttribute("platform");
+  let expectedPlatform = getPlatform();
+  is(platform, expectedPlatform, ":root[platform] is correct");
+
+  let theme = Services.prefs.getCharPref("devtools.theme");
+  let className = "theme-" + theme;
+  ok(root.classList.contains(className), ":root has " + className + " class (current theme)");
+
+  yield toolbox.destroy();
+});
+
+function getPlatform() {
+  let {OS} = Services.appinfo;
+  if (OS == "WINNT") {
+    return "win";
+  } else if (OS == "Darwin") {
+    return "mac";
+  } else {
+    return "linux";
+  }
+}

--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -102,16 +102,27 @@
 
   const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 
   Cu.import("resource://gre/modules/Services.jsm");
   Cu.import("resource://devtools/client/framework/gDevTools.jsm");
   const {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
   const StylesheetUtils = require("sdk/stylesheet/utils");
 
+  let os;
+  let platform = navigator.platform;
+  if (platform.startsWith("Win")) {
+    os = "win";
+  } else if (platform.startsWith("Mac")) {
+    os = "mac";
+  } else {
+    os = "linux";
+  }
+  documentElement.setAttribute("platform", os);
+
   if (documentElement.hasAttribute("force-theme")) {
     switchTheme(documentElement.getAttribute("force-theme"));
   } else {
     switchTheme(Services.prefs.getCharPref("devtools.theme"));
 
     gDevTools.on("pref-changed", handlePrefChange);
     window.addEventListener("unload", function() {
       gDevTools.off("pref-changed", handlePrefChange);

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,14 +1,15 @@
 /* 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/. */
 
 @import url(variables.css);
+@import url(toolbars.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
@@ -369,11 +370,8 @@ div.CodeMirror span.eval-text {
 }
 
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(255, 255, 255, .3);
   background-color: #0f171f;
   color: var(--theme-body-color);
 }
-
-
-%include toolbars.inc.css

--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,14 +1,15 @@
 /* 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/. */
 
 @import url(variables.css);
+@import url(toolbars.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
@@ -367,11 +368,8 @@ div.CodeMirror span.eval-text {
   border-bottom: 0;
 }
 
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   box-shadow: 0 0 4px rgba(128, 128, 128, .5);
   background-color: var(--theme-sidebar-background);
 }
-
-
-%include toolbars.inc.css

--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -82,17 +82,17 @@ html, body, #app, #memory-tool {
     background-image: url(images/command-screenshot@2x.png);
   }
 }
 
 /**
  * TODO bug 1213100
  * Once we figure out how to store invertable buttons (pseudo element like in
  * this case?) we should add a .invertable class to handle this generally,
- * rather than the definitions in toolbars.inc.css.
+ * rather than the definitions in toolbars.css.
  *
  * @see bug 1173397 for another inverted related bug
  */
 .theme-light .devtools-toolbar > .devtools-toolbarbutton.take-snapshot::before {
   filter: url(images/filters.svg#invert);
 }
 
 /**

rename from devtools/client/themes/toolbars.inc.css
rename to devtools/client/themes/toolbars.css
--- a/devtools/client/themes/toolbars.inc.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,13 +1,12 @@
-%if 0
+/* 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/. */
-%endif
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 .theme-light {
   --searchbox-background-color: #ffee99;
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
 }
@@ -327,25 +326,26 @@
 
 /* Text input */
 
 .devtools-textinput,
 .devtools-searchinput {
   -moz-appearance: none;
   margin: 1px 3px;
   border: 1px solid;
-%ifdef XP_MACOSX
-  border-radius: 20px;
-%else
   border-radius: 2px;
-%endif
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);
 }
 
+:root[platform="mac"] .devtools-textinput,
+:root[platform="mac"] .devtools-searchinput {
+  border-radius: 20px;
+}
+
 .devtools-searchinput {
   padding: 0;
   -moz-padding-start: 22px;
   -moz-padding-end: 4px;
   background-position: 8px center;
   background-size: 11px 11px;
   background-repeat: no-repeat;
   font-size: inherit;