--- a/browser/components/extensions/ext-devtools-panels.js
+++ b/browser/components/extensions/ext-devtools-panels.js
@@ -77,17 +77,17 @@ class ParentDevToolsPanel {
     const extensionName = this.context.extension.name;
 
     this.toolbox.addAdditionalTool({
       id: this.id,
       url: "about:blank",
       icon: icon,
       label: title,
       tooltip: `DevTools Panel added by "${extensionName}" add-on.`,
-      invertIconForLightTheme: true,
+      invertIconForLightTheme: false,
       visibilityswitch:  `devtools.webext-${this.id}.enabled`,
       isTargetSupported: target => target.isLocalTab,
       build: (window, toolbox) => {
         if (toolbox !== this.toolbox) {
           throw new Error("Unexpected toolbox received on addAdditionalTool build property");
         }
 
         const destroy = this.buildPanel(window, toolbox);

--- a/browser/components/extensions/test/browser/browser_ext_devtools_panel.js
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_panel.js
@@ -207,17 +207,21 @@ add_task(async function test_devtools_pa
 
   const toolboxAdditionalTools = toolbox.getAdditionalTools();
 
   is(toolboxAdditionalTools.length, 1,
      "Got the expected number of toolbox specific panel registered.");
 
   await testThemeSwitching(extension);
 
-  const panelId = toolboxAdditionalTools[0].id;
+  const panelDef = toolboxAdditionalTools[0];
+  const panelId = panelDef.id;
+
+  is(panelDef.invertIconForLightTheme, false,
+     "devtools.panel.create set invertIconForLightTheme to false by default");
 
   await gDevTools.showToolbox(target, panelId);
   const {devtoolsPageTabId} = await extension.awaitMessage("devtools_panel_shown");
   const devtoolsPanelTabId = await extension.awaitMessage("devtools_panel_inspectedWindow_tabId");
   is(devtoolsPanelTabId, devtoolsPageTabId,
      "Got the same devtools.inspectedWindow.tabId from devtools page and panel");
   is(await extension.awaitMessage("initial_theme_panel"),
     "light",