--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -355,17 +355,19 @@ class BasePopup {
     // Panels inherit the applied theme (light, dark, etc) and there is a high
     // likelihood that most extension authors will not have tested with a dark theme.
     // If they have not set a background-color, we force it to white to ensure visibility
     // of the extension content. Passing `null` should be treated the same as no argument,
     // which is why we can't use default parameters here.
     if (!background) {
       background = "#fff";
     }
-    this.panel.style.setProperty("--arrowpanel-background", background);
+    if (this.panel.id != "widget-overflow") {
+      this.panel.style.setProperty("--arrowpanel-background", background);
+    }
     if (background == "#fff") {
       // Set a usable default color that work with the default background-color.
       this.panel.style.setProperty("--arrowpanel-border-color", "hsla(210,4%,10%,.15)");
     }
     this.background = background;
   }
 }
 

--- a/browser/components/extensions/test/browser/browser_ext_popup_background.js
+++ b/browser/components/extensions/test/browser/browser_ext_popup_background.js
@@ -5,17 +5,30 @@
 
 async function testPanel(browser, standAlone, initial_background) {
   let panel = getPanelForNode(browser);
   let arrowContent = document.getAnonymousElementByAttribute(panel, "class", "panel-arrowcontent");
   let arrow = document.getAnonymousElementByAttribute(panel, "anonid", "arrow");
 
   let checkArrow = (background = null) => {
     if (background == null || !standAlone) {
-      ok(!arrow.style.hasOwnProperty("fill"), "Arrow fill should be the default one");
+      if (standAlone) {
+        is(getComputedStyle(arrow).fill,
+           "rgb(255, 255, 255)", "Arrow fill should be set to #fff when no background is supplied and popup is standAlone");
+      } else {
+        let default_background =
+          getComputedStyle(document.documentElement).getPropertyValue("--arrowpanel-background");
+        // Need to apply the color to a node and get the computed value
+        // to resolve CSS named colors such as -moz-field.
+        let span = document.createElementNS("http://www.w3.org/1999/xhtml", "span");
+        span.style.color = default_background;
+        let default_background_computed = getComputedStyle(span).color;
+
+        is(getComputedStyle(arrow).fill, default_background_computed, "Arrow fill should be the default one");
+      }
       return;
     }
 
     is(getComputedStyle(arrowContent).backgroundColor, background, "Arrow content should have correct background");
     is(getComputedStyle(arrow).fill, background, "Arrow should have correct background");
   };
 
   function getBackground(browser) {

--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -141,8 +141,12 @@
 
 /* End private browsing and accessibility indicators */
 
 /* Force background for datepicker popup to white so themes don't override it */
 #DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowbox,
 #DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowcontent {
   --arrowpanel-background: #fff;
 }
+
+#widget-overflow .webextension-popup-browser {
+  background: #fff;
+}