--- a/browser/base/content/browser-compacttheme.js
+++ b/browser/base/content/browser-compacttheme.js
@@ -2,17 +2,16 @@
  * 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/. */
 
 /**
  * Listeners for the compact theme.  This adds an extra stylesheet
  * to browser.xul if a pref is set and no other themes are applied.
  */
 var CompactTheme = {
-  _devtoolsThemePrefName: "devtools.theme",
   styleSheetLocation: "chrome://browser/skin/compacttheme.css",
   styleSheet: null,
   initialized: false,
 
   get isStyleSheetEnabled() {
     return this.styleSheet && !this.styleSheet.sheet.disabled;
   },
 
@@ -20,19 +19,17 @@ var CompactTheme = {
     let theme = LightweightThemeManager.currentTheme;
     return theme && (
            theme.id == "firefox-compact-dark@mozilla.org" ||
            theme.id == "firefox-compact-light@mozilla.org");
   },
 
   init() {
     this.initialized = true;
-    Services.prefs.addObserver(this._devtoolsThemePrefName, this, false);
     Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
-    this._updateDevtoolsThemeAttribute();
 
     if (this.isThemeCurrentlyApplied) {
       this._toggleStyleSheet(true);
     }
   },
 
   createStyleSheet() {
     let styleSheetAttr = `href="${this.styleSheetLocation}" type="text/css"`;
@@ -52,30 +49,16 @@ var CompactTheme = {
         // We are using the theme ID on this object instead of always referencing
         // LightweightThemeManager.currentTheme in case this is a preview
         this._toggleStyleSheet(true);
       } else {
         this._toggleStyleSheet(false);
       }
 
     }
-
-    if (topic == "nsPref:changed" && data == this._devtoolsThemePrefName) {
-      this._updateDevtoolsThemeAttribute();
-    }
-  },
-
-  _updateDevtoolsThemeAttribute() {
-    // Set an attribute on root element to make it possible
-    // to change colors based on the selected devtools theme.
-    let devtoolsTheme = Services.prefs.getCharPref(this._devtoolsThemePrefName);
-    if (devtoolsTheme != "dark") {
-      devtoolsTheme = "light";
-    }
-    document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
   },
 
   handleEvent(e) {
     if (e.type === "load") {
       this.styleSheet.removeEventListener("load", this);
       this.refreshBrowserDisplay();
     }
   },
@@ -100,17 +83,16 @@ var CompactTheme = {
       this.refreshBrowserDisplay();
     } else if (!enabled && wasEnabled) {
       this.styleSheet.sheet.disabled = true;
       this.refreshBrowserDisplay();
     }
   },
 
   uninit() {
-    Services.prefs.removeObserver(this._devtoolsThemePrefName, this);
     Services.obs.removeObserver(this, "lightweight-theme-styling-update", false);
     if (this.styleSheet) {
       this.styleSheet.removeEventListener("load", this);
     }
     this.styleSheet = null;
   }
 };
 

--- a/devtools/client/framework/devtools-browser.js
+++ b/devtools/client/framework/devtools-browser.js
@@ -124,27 +124,48 @@ var gDevToolsBrowser = exports.gDevTools
     let remoteEnabled = chromeEnabled && devtoolsRemoteEnabled;
     toggleMenuItem("menu_browserToolbox", remoteEnabled);
     toggleMenuItem("menu_browserContentToolbox", remoteEnabled && win.gMultiProcessBrowser);
 
     // Enable DevTools connection screen, if the preference allows this.
     toggleMenuItem("menu_devtools_connect", devtoolsRemoteEnabled);
   },
 
+  /**
+   * This function makes sure that the "devtoolstheme" attribute is set on the browser
+   * window to make it possible to change colors on elements in the browser (like gcli,
+   * or the splitter between the toolbox and web content).
+   */
+  updateDevtoolsThemeAttribute: function(win) {
+    // Set an attribute on root element of each window to make it possible
+    // to change colors based on the selected devtools theme.
+    let devtoolsTheme = Services.prefs.getCharPref("devtools.theme");
+    if (devtoolsTheme != "dark") {
+      devtoolsTheme = "light";
+    }
+
+    win.document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
+  },
+
   observe: function (subject, topic, prefName) {
     switch (topic) {
       case "browser-delayed-startup-finished":
         this._registerBrowserWindow(subject);
         break;
       case "nsPref:changed":
         if (prefName.endsWith("enabled")) {
           for (let win of this._trackedBrowserWindows) {
             this.updateCommandAvailability(win);
           }
         }
+        if (prefName === "devtools.theme") {
+          for (let win of this._trackedBrowserWindows) {
+            this.updateDevtoolsThemeAttribute(win);
+          }
+        }
         break;
       case "quit-application":
         gDevToolsBrowser.destroy({ shuttingDown: true });
         break;
       case "sdk:loader:destroy":
         // This event is fired when the devtools loader unloads, which happens
         // only when the add-on workflow ask devtools to be reloaded.
         if (subject.wrappedJSObject == require('@loader/unload')) {
@@ -456,16 +477,17 @@ var gDevToolsBrowser = exports.gDevTools
 
     // Inject lazily DeveloperToolbar on the chrome window
     loader.lazyGetter(win, "DeveloperToolbar", function () {
       let { DeveloperToolbar } = require("devtools/client/shared/developer-toolbar");
       return new DeveloperToolbar(win);
     });
 
     this.updateCommandAvailability(win);
+    this.updateDevtoolsThemeAttribute(win);
     this.ensurePrefObserver();
     win.addEventListener("unload", this);
 
     let tabContainer = win.gBrowser.tabContainer;
     tabContainer.addEventListener("TabSelect", this, false);
     tabContainer.addEventListener("TabOpen", this, false);
     tabContainer.addEventListener("TabClose", this, false);
     tabContainer.addEventListener("TabPinned", this, false);