--- a/browser/components/extensions/ext-browserAction.js
+++ b/browser/components/extensions/ext-browserAction.js
@@ -437,24 +437,22 @@ this.browserAction = class extends Exten
       }
 
       if (tabData.enabled) {
         node.removeAttribute("disabled");
       } else {
         node.setAttribute("disabled", "true");
       }
 
-      let badgeNode = node.ownerDocument.getAnonymousElementByAttribute(node,
-                                          "class", "toolbarbutton-badge");
-      if (badgeNode) {
-        let color = tabData.badgeBackgroundColor;
-        if (color) {
-          color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 255})`;
-        }
-        badgeNode.style.backgroundColor = color || "";
+      let color = tabData.badgeBackgroundColor;
+      if (color) {
+        color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 255})`;
+        node.setAttribute("badgeStyle", `background-color: ${color};`);
+      } else {
+        node.removeAttribute("badgeStyle");
       }
 
       let {style, legacy} = this.iconData.get(tabData.icon);
       const LEGACY_CLASS = "toolbarbutton-legacy-addon";
       if (legacy) {
         node.classList.add(LEGACY_CLASS);
       } else {
         node.classList.remove(LEGACY_CLASS);

--- a/browser/components/extensions/test/browser/browser_ext_browserAction_context.js
+++ b/browser/components/extensions/test/browser/browser_ext_browserAction_context.js
@@ -402,8 +402,52 @@ add_task(async function testDefaultTitle
 
           await expectDefaults(details[3]);
           expect(details[3]);
         },
       ];
     },
   });
 });
+
+add_task(async function testBadgeColorPersistence() {
+  const extension = ExtensionTestUtils.loadExtension({
+    background() {
+      browser.test.onMessage.addListener((msg, arg) => {
+        browser.browserAction[msg](arg);
+      });
+    },
+    manifest: {
+      browser_action: {},
+    },
+  });
+  await extension.startup();
+
+  function getBadgeForWindow(win) {
+    const widget = getBrowserActionWidget(extension).forWindow(win).node;
+    return document.getAnonymousElementByAttribute(widget, "class", "toolbarbutton-badge");
+  }
+
+  let badge = getBadgeForWindow(window);
+  const badgeChanged = new Promise((resolve) => {
+    const observer = new MutationObserver(() => resolve());
+    observer.observe(badge, {attributes: true, attributeFilter: ["style"]});
+  });
+
+  extension.sendMessage("setBadgeText", {text: "hi"});
+  extension.sendMessage("setBadgeBackgroundColor", {color: [0, 255, 0, 255]});
+
+  await badgeChanged;
+
+  is(badge.value, "hi", "badge text is set in first window");
+  is(badge.style.backgroundColor, "rgb(0, 255, 0)", "badge color is set in first window");
+
+  let windowOpenedPromise = BrowserTestUtils.waitForNewWindow();
+  let win = OpenBrowserWindow();
+  await windowOpenedPromise;
+
+  badge = getBadgeForWindow(win);
+  is(badge.value, "hi", "badge text is set in new window");
+  is(badge.style.backgroundColor, "rgb(0, 255, 0)", "badge color is set in new window");
+
+  await BrowserTestUtils.closeWindow(win);
+  await extension.unload();
+});

--- a/toolkit/content/widgets/toolbarbutton.xml
+++ b/toolkit/content/widgets/toolbarbutton.xml
@@ -83,17 +83,17 @@
   </binding>
 
   <binding id="toolbarbutton-badged"
            extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
     <content>
       <children includes="observes|template|menupopup|panel|tooltip"/>
       <xul:stack class="toolbarbutton-badge-stack">
         <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label,consumeanchor"/>
-        <xul:label class="toolbarbutton-badge" xbl:inherits="value=badge" top="0" end="0" crop="none"/>
+        <xul:label class="toolbarbutton-badge" xbl:inherits="value=badge,style=badgeStyle" top="0" end="0" crop="none"/>
       </xul:stack>
       <xul:label class="toolbarbutton-text" crop="right" flex="1"
                  xbl:inherits="value=label,accesskey,crop,wrap"/>
       <xul:label class="toolbarbutton-multiline-text" flex="1"
                  xbl:inherits="xbl:text=label,accesskey,wrap"/>
     </content>
   </binding>