--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -6,18 +6,18 @@
   --toolbarbutton-hover-transition-duration: 150ms;
 
   --toolbarbutton-outer-padding: 2px;
   --toolbarbutton-inner-padding: 6px;
 
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
-  --toolbarbutton-hover-background: hsla(0,0%,70%,.4);
-  --toolbarbutton-active-background: hsla(0,0%,70%,.6);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.6));
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
@@ -32,24 +32,24 @@
 :root[uidensity=touch] {
   --toolbarbutton-inner-padding: 9px;
 }
 
 /* We use :-moz-lwtheme-* for toolbarbuttons that aren't inside a toolbar, and
    [brighttext] to cater for OS themes where :-moz-lwtheme-* doesn't apply. */
 :root:-moz-lwtheme-darktext,
 toolbar:not([brighttext]) {
-  --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
-  --toolbarbutton-active-background: hsla(240,5%,5%,.15);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(240,5%,5%,.1));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(240,5%,5%,.15));
 }
 
 :root:-moz-lwtheme-brighttext,
 toolbar[brighttext] {
-  --toolbarbutton-hover-background: hsla(0,0%,100%,.2);
-  --toolbarbutton-active-background: hsla(0,0%,100%,.3);
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,100%,.2));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,100%,.3));
 
   --backbutton-background: var(--toolbarbutton-hover-background);
   --backbutton-hover-background: var(--toolbarbutton-active-background);
   --backbutton-active-background: hsla(0,0%,100%,.4);
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
@@ -163,16 +163,28 @@ toolbar .toolbaritem-combined-buttons:no
   background-size: 1px 16px;
   opacity: .2;
 }
 
 toolbar[brighttext] .toolbaritem-combined-buttons > separator {
   opacity: .3;
 }
 
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active),
+.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]),
+.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]),
+.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])) > .toolbarbutton-text,
+toolbarbutton.bookmark-item:not(.subviewbutton):not([disabled="true"]):not([open]),
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack {
+  background-color: var(--lwt-toolbarbutton-background, transparent);
+  color: inherit;
+}
+
 #PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {

--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -151,16 +151,19 @@ class Theme {
           break;
         case "tab_text":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
+        case "button_background":
+        case "button_background_hover":
+        case "button_background_active":
           this.lwtStyles[color] = cssColor;
           break;
       }
     }
   }
 
   /**
    * Helper method for loading images found in the extension's manifest.

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -131,16 +131,28 @@
               },
               "icons": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "icons_attention": {
                 "$ref": "ThemeColor",
                 "optional": true
+              },
+              "button_background": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
+              "button_background_hover": {
+               "$ref": "ThemeColor",
+               "optional": true
+              },
+              "button_background_active": {
+                "$ref": "ThemeColor",
+                "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
@@ -13,8 +13,9 @@ support-files =
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
 [browser_ext_themes_separators.js]
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
+[browser_ext_themes_toolbarbutton_colors.js]

new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_colors.js
@@ -0,0 +1,65 @@
+"use strict";
+
+Cu.importGlobalProperties(["InspectorUtils"]);
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the button background color properties are applied correctly.
+
+add_task(async function test_button_background_properties() {
+  const BUTTON_BACKGROUND = "#DEDEDE";
+  const BUTTON_BACKGROUND_ACTIVE = "#FFFFFF";
+  const BUTTON_BACKGROUND_HOVER = "#59CBE8";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "button_background": BUTTON_BACKGROUND,
+          "button_background_active": BUTTON_BACKGROUND_ACTIVE,
+          "button_background_hover": BUTTON_BACKGROUND_HOVER,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+
+  });
+
+  await extension.startup();
+
+  let toolbarButton = document.querySelector("#home-button");
+  let toolbarButtonIcon = document.getAnonymousElementByAttribute(toolbarButton, "class", "toolbarbutton-icon");
+  let toolbarButtonIconCS = window.getComputedStyle(toolbarButtonIcon);
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND).join(", ")})`,
+    "Toolbar button background is set."
+  );
+
+  InspectorUtils.addPseudoClassLock(toolbarButton, ":hover");
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND_HOVER).join(", ")})`,
+    "Toolbar button hover background is set."
+  );
+
+  InspectorUtils.addPseudoClassLock(toolbarButton, ":active");
+
+  Assert.equal(
+    toolbarButtonIconCS.getPropertyValue("background-color"),
+    `rgb(${hexToRGB(BUTTON_BACKGROUND_ACTIVE).join(", ")})`,
+    "Toolbar button active background is set!"
+  );
+
+  InspectorUtils.clearPseudoClassLocks(toolbarButton);
+
+  await extension.unload();
+});

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -23,16 +23,19 @@ const kCSSVarsMap = new Map([
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
   ["--tabs-border-color", "toolbar_top_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--urlbar-separator-color", "toolbar_vertical_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
+  ["--lwt-toolbarbutton-background", "button_background"],
+  ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
+  ["--lwt-toolbarbutton-active-background", "button_background_active"],
 ]);
 
 this.LightweightThemeConsumer =
  function LightweightThemeConsumer(aDocument) {
   this._doc = aDocument;
   this._win = aDocument.defaultView;
 
   let screen = this._win.screen;