--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -57,16 +57,19 @@ class Theme {
     // Lightweight themes require all properties to be defined.
     if (this.lwtStyles.headerURL &&
         this.lwtStyles.accentcolor &&
         this.lwtStyles.textcolor) {
       LightweightThemeManager.fallbackThemeData = this.lwtStyles;
       Services.obs.notifyObservers(null,
         "lightweight-theme-styling-update",
         JSON.stringify(this.lwtStyles));
+    } else {
+      this.logger.warn("Your theme doesn't include one of the following required " +
+        "properties: 'headerURL', 'accentcolor' or 'textcolor'");
     }
   }
 
   /**
    * Helper method for loading colors found in the extension's manifest.
    *
    * @param {Object} colors Dictionary mapping color properties to values.
    */
@@ -87,16 +90,19 @@ class Theme {
         case "accentcolor":
         case "frame":
           this.lwtStyles.accentcolor = cssColor;
           break;
         case "textcolor":
         case "tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
+        case "toolbar":
+          this.lwtStyles.toolbarColor = cssColor;
+          break;
       }
     }
   }
 
   /**
    * Helper method for loading images found in the extension's manifest.
    *
    * @param {Object} images Dictionary mapping image properties to values.

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -59,16 +59,20 @@
                 "items": {
                   "type": "number"
                 },
                 "optional": true
               },
               "textcolor": {
                 "type": "string",
                 "optional": true
+              },
+              "toolbar": {
+                "type": "string",
+                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
           },
           "icons": {
             "type": "object",
             "optional": true,
             "properties": {

--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -1,10 +1,11 @@
 [DEFAULT]
 support-files =
   head.js
 
+[browser_ext_management_themes.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
-[browser_ext_management_themes.js]
+[browser_ext_themes_toolbars.js]

new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
@@ -0,0 +1,48 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color of toolbars are applied properly.
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.webextensions.themes.enabled", true]],
+  });
+});
+
+add_task(async function test_support_toolbar_property() {
+  const TOOLBAR_COLOR = "#ff00ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar": TOOLBAR_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let toolbars = [...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)")].filter(toolbar => {
+    let bounds = toolbar.getBoundingClientRect();
+    return bounds.width > 0 && bounds.height > 0;
+  });
+
+  info(`Checking toolbar background colors for ${toolbars.length} toolbars.`);
+  for (let toolbar of toolbars) {
+    info(`Testing ${toolbar.id}`);
+    Assert.equal(window.getComputedStyle(toolbar).backgroundColor,
+      "rgb(" + hexToRGB(TOOLBAR_COLOR).join(", ") + ")", "Toolbar color should be set.");
+  }
+
+  await extension.unload();
+});

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -8,16 +8,22 @@ const {utils: Cu} = Components;
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/AppConstants.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
+const kCSSVarsMap = new Map([
+  ["--lwt-background-alignment", "backgroundsAlignment"],
+  ["--lwt-background-tiling", "backgroundsTiling"],
+  ["--toolbar-bgcolor", "toolbarColor"]
+]);
+
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;
   this._lastScreenWidth = screen.width;
   this._lastScreenHeight = screen.height;
@@ -130,18 +136,17 @@ LightweightThemeConsumer.prototype = {
       }
     } else {
       root.removeAttribute("lwthemeicons");
     }
 
     _setImage(root, active, "--lwt-header-image", aData.headerURL);
     _setImage(root, active, "--lwt-footer-image", aData.footerURL);
     _setImage(root, active, "--lwt-additional-images", aData.additionalBackgrounds);
-    _setProperty(root, active, "--lwt-background-alignment", aData.backgroundsAlignment);
-    _setProperty(root, active, "--lwt-background-tiling", aData.backgroundsTiling);
+    _setProperties(root, active, aData);
 
     if (active && aData.footerURL)
       root.setAttribute("lwthemefooter", "true");
     else
       root.removeAttribute("lwthemefooter");
 
     // On OS X, we extend the lightweight theme into the titlebar, which means setting
     // the chromemargin attribute. Some XUL applications already draw in the titlebar,
@@ -179,13 +184,19 @@ function _setImage(aRoot, aActive, aVari
 function _setProperty(root, active, variableName, value) {
   if (active && value) {
     root.style.setProperty(variableName, value);
   } else {
     root.style.removeProperty(variableName);
   }
 }
 
+function _setProperties(root, active, vars) {
+  for (let [cssVarName, varsKey] of kCSSVarsMap) {
+    _setProperty(root, active, cssVarName, vars[varsKey]);
+  }
+}
+
 function _parseRGB(aColorString) {
   var rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
   rgb.shift();
   return rgb.map(x => parseInt(x));
 }