--- a/addon-sdk/source/lib/dev/panel.js
+++ b/addon-sdk/source/lib/dev/panel.js
@@ -159,16 +159,20 @@ validate.define(Panel, contract({
     map: x => resolve(x.toString()),
     is: ["string"],
     ok: x => isLocalURL(x),
     msg: "The `options.url` must be a valid local URI."
   },
   invertIconForLightTheme: {
     is: ["boolean", "undefined"],
     msg: "The `options.invertIconForLightTheme` must be a boolean."
+  },
+  invertIconForDarkTheme: {
+    is: ["boolean", "undefined"],
+    msg: "The `options.invertIconForDarkTheme` must be a boolean."
   }
 }));
 
 setup.define(Panel, (panel, {window, toolbox, url}) => {
   // Hack: Given that iframe created by devtools API is no good for us,
   // we obtain original iframe and replace it with the one that has
   // desired configuration.
   const original = getFrameElement(window);

--- a/addon-sdk/source/lib/dev/toolbox.js
+++ b/addon-sdk/source/lib/dev/toolbox.js
@@ -37,27 +37,28 @@ const Tool = Class({
   setup: function(params={}) {
     const { panels } = validate(this, params);
     const { themes } = validate(this, params);
 
     this.panels = panels;
     this.themes = themes;
 
     each(([key, Panel]) => {
-      const { url, label, tooltip, icon,
-             invertIconForLightTheme } = validate(Panel.prototype);
+      const { url, label, tooltip, icon, invertIconForLightTheme,
+              invertIconForDarkTheme } = validate(Panel.prototype);
       const { id } = Panel.prototype;
 
       gDevTools.registerTool({
         id: id,
         url: "about:blank",
         label: label,
         tooltip: tooltip,
         icon: icon,
         invertIconForLightTheme: invertIconForLightTheme,
+        invertIconForDarkTheme: invertIconForDarkTheme,
         isTargetSupported: target => target.isLocalTab,
         build: (window, toolbox) => {
           const panel = new Panel();
           setup(panel, { window: window,
                          toolbox: toolbox,
                          url: url });
 
           return panel.ready();

--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -58,17 +58,17 @@ var Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
   url: "chrome://devtools/content/framework/toolbox-options.xhtml",
   icon: "chrome://devtools/skin/images/tool-options.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   bgTheme: "theme-body",
   label: l10n("options.label", toolboxStrings),
   iconOnly: true,
   panelLabel: l10n("options.panelLabel", toolboxStrings),
   tooltip: l10n("optionsButton.tooltip", toolboxStrings),
   inMenu: false,
 
   isTargetSupported: function () {
@@ -82,17 +82,17 @@ Tools.options = {
 
 Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
   ordinal: 1,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   icon: "chrome://devtools/skin/images/tool-inspector.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
   panelLabel: l10n("inspector.panelLabel", inspectorStrings),
   get tooltip() {
     return l10n("inspector.tooltip2", inspectorStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
@@ -118,17 +118,17 @@ Tools.inspector = {
 
 Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 2,
   icon: "chrome://devtools/skin/images/tool-webconsole.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webconsole/webconsole.xul",
   label: l10n("ToolboxTabWebconsole.label", webConsoleStrings),
   menuLabel: l10n("MenuWebconsole.label", webConsoleStrings),
   panelLabel: l10n("ToolboxWebConsole.panelLabel", webConsoleStrings),
   get tooltip() {
     return l10n("ToolboxWebconsole.tooltip2", webConsoleStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -156,17 +156,17 @@ Tools.webConsole = {
 
 Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("debuggerMenu.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 3,
   icon: "chrome://devtools/skin/images/tool-debugger.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-debugger-paused.svg",
   url: "chrome://devtools/content/debugger/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
   panelLabel: l10n("ToolboxDebugger.panelLabel", debuggerStrings),
   get tooltip() {
     return l10n("ToolboxDebugger.tooltip2", debuggerStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -185,17 +185,17 @@ Tools.jsdebugger = {
 Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 4,
   visibilityswitch: "devtools.styleeditor.enabled",
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   icon: "chrome://devtools/skin/images/tool-styleeditor.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/styleeditor/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
   panelLabel: l10n("ToolboxStyleEditor.panelLabel", styleEditorStrings),
   get tooltip() {
     return l10n("ToolboxStyleEditor.tooltip3", styleEditorStrings,
     "Shift+" + functionkey(this.key));
   },
   inMenu: true,
@@ -210,17 +210,17 @@ Tools.styleEditor = {
   }
 };
 
 Tools.shaderEditor = {
   id: "shadereditor",
   ordinal: 5,
   visibilityswitch: "devtools.shadereditor.enabled",
   icon: "chrome://devtools/skin/images/tool-shadereditor.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/shadereditor/shadereditor.xul",
   label: l10n("ToolboxShaderEditor.label", shaderEditorStrings),
   panelLabel: l10n("ToolboxShaderEditor.panelLabel", shaderEditorStrings),
   tooltip: l10n("ToolboxShaderEditor.tooltip", shaderEditorStrings),
 
   isTargetSupported: function (target) {
     return target.hasActor("webgl") && !target.chrome;
   },
@@ -230,17 +230,17 @@ Tools.shaderEditor = {
   }
 };
 
 Tools.canvasDebugger = {
   id: "canvasdebugger",
   ordinal: 6,
   visibilityswitch: "devtools.canvasdebugger.enabled",
   icon: "chrome://devtools/skin/images/tool-canvas.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/canvasdebugger/canvasdebugger.xul",
   label: l10n("ToolboxCanvasDebugger.label", canvasDebuggerStrings),
   panelLabel: l10n("ToolboxCanvasDebugger.panelLabel", canvasDebuggerStrings),
   tooltip: l10n("ToolboxCanvasDebugger.tooltip", canvasDebuggerStrings),
 
   // Hide the Canvas Debugger in the Add-on Debugger and Browser Toolbox
   // (bug 1047520).
   isTargetSupported: function (target) {
@@ -251,17 +251,17 @@ Tools.canvasDebugger = {
     return new CanvasDebuggerPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.performance = {
   id: "performance",
   ordinal: 7,
   icon: "chrome://devtools/skin/images/tool-profiler.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-profiler-active.svg",
   url: "chrome://devtools/content/performance/performance.xul",
   visibilityswitch: "devtools.performance.enabled",
   label: l10n("performance.label", performanceStrings),
   panelLabel: l10n("performance.panelLabel", performanceStrings),
   get tooltip() {
     return l10n("performance.tooltip", performanceStrings,
     "Shift+" + functionkey(this.key));
@@ -279,17 +279,17 @@ Tools.performance = {
     return new PerformancePanel(frame, target);
   }
 };
 
 Tools.memory = {
   id: "memory",
   ordinal: 8,
   icon: "chrome://devtools/skin/images/tool-memory.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   highlightedicon: "chrome://devtools/skin/images/tool-memory-active.svg",
   url: "chrome://devtools/content/memory/memory.xhtml",
   visibilityswitch: "devtools.memory.enabled",
   label: l10n("memory.label", memoryStrings),
   panelLabel: l10n("memory.panelLabel", memoryStrings),
   tooltip: l10n("memory.tooltip", memoryStrings),
 
   isTargetSupported: function (target) {
@@ -304,17 +304,17 @@ Tools.memory = {
 Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
   ordinal: 9,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.netmonitor.enabled",
   icon: "chrome://devtools/skin/images/tool-network.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/netmonitor/netmonitor.xul",
   label: l10n("netmonitor.label", netMonitorStrings),
   panelLabel: l10n("netmonitor.panelLabel", netMonitorStrings),
   get tooltip() {
     return l10n("netmonitor.tooltip2", netMonitorStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
@@ -331,17 +331,17 @@ Tools.netMonitor = {
 Tools.storage = {
   id: "storage",
   key: l10n("storage.commandkey", storageStrings),
   ordinal: 10,
   accesskey: l10n("storage.accesskey", storageStrings),
   modifiers: "shift",
   visibilityswitch: "devtools.storage.enabled",
   icon: "chrome://devtools/skin/images/tool-storage.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/storage/storage.xul",
   label: l10n("storage.label", storageStrings),
   menuLabel: l10n("storage.menuLabel", storageStrings),
   panelLabel: l10n("storage.panelLabel", storageStrings),
   get tooltip() {
     return l10n("storage.tooltip3", storageStrings,
     "Shift+" + functionkey(this.key));
   },
@@ -357,17 +357,17 @@ Tools.storage = {
   }
 };
 
 Tools.webAudioEditor = {
   id: "webaudioeditor",
   ordinal: 11,
   visibilityswitch: "devtools.webaudioeditor.enabled",
   icon: "chrome://devtools/skin/images/tool-webaudio.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webaudioeditor/webaudioeditor.xul",
   label: l10n("ToolboxWebAudioEditor1.label", webAudioEditorStrings),
   panelLabel: l10n("ToolboxWebAudioEditor1.panelLabel", webAudioEditorStrings),
   tooltip: l10n("ToolboxWebAudioEditor1.tooltip", webAudioEditorStrings),
 
   isTargetSupported: function (target) {
     return !target.chrome && target.hasActor("webaudio");
   },
@@ -377,17 +377,17 @@ Tools.webAudioEditor = {
   }
 };
 
 Tools.scratchpad = {
   id: "scratchpad",
   ordinal: 12,
   visibilityswitch: "devtools.scratchpad.enabled",
   icon: "chrome://devtools/skin/images/tool-scratchpad.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/scratchpad/scratchpad.xul",
   label: l10n("scratchpad.label", scratchpadStrings),
   panelLabel: l10n("scratchpad.panelLabel", scratchpadStrings),
   tooltip: l10n("scratchpad.tooltip", scratchpadStrings),
   inMenu: false,
   commands: "devtools/client/scratchpad/scratchpad-commands",
 
   isTargetSupported: function (target) {
@@ -402,17 +402,17 @@ Tools.scratchpad = {
 Tools.dom = {
   id: "dom",
   accesskey: l10n("dom.accesskey", domStrings),
   key: l10n("dom.commandkey", domStrings),
   ordinal: 13,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.dom.enabled",
   icon: "chrome://devtools/skin/images/tool-dom.svg",
-  invertIconForLightTheme: true,
+  invertIconForDarkTheme: true,
   url: "chrome://devtools/content/dom/dom.html",
   label: l10n("dom.label", domStrings),
   panelLabel: l10n("dom.panelLabel", domStrings),
   get tooltip() {
     return l10n("dom.tooltip", domStrings,
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,

--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1098,17 +1098,19 @@ Toolbox.prototype = {
     // the devtools-tab class replaces the radio XBL binding with its base
     // binding (the control-item binding).
     radio.className = "devtools-tab";
     radio.id = "toolbox-tab-" + id;
     radio.setAttribute("toolid", id);
     radio.setAttribute("ordinal", toolDefinition.ordinal);
     radio.setAttribute("tooltiptext", toolDefinition.tooltip);
     if (toolDefinition.invertIconForLightTheme) {
-      radio.setAttribute("icon-invertable", "true");
+      radio.setAttribute("icon-invertable", "light-theme");
+    } else if (toolDefinition.invertIconForDarkTheme) {
+      radio.setAttribute("icon-invertable", "dark-theme");
     }
 
     radio.addEventListener("command", () => {
       this.selectTool(id);
     });
 
     // spacer lets us center the image and label, while allowing cropping
     let spacer = this.doc.createElement("spacer");

--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -612,26 +612,16 @@
 #black-boxed-message-button .button-icon,
 #requests-menu-perf-notice-button .button-icon,
 #canvas-debugging-empty-notice-button .button-icon,
 #toggle-breakpoints[checked] > image,
 .event-tooltip-debugger-icon {
   filter: var(--icon-filter);
 }
 
-/* Since the tab selected background is blue, we should invert the icon */
-.devtools-tab[icon-invertable][selected] > image {
-  filter: invert(1);
-}
-
-/* Since "highlighted" icons are green, we should omit the filter */
-.devtools-tab[icon-invertable][highlighted] > image {
-  filter: none;
-}
-
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {
   border-color: transparent;
   background-color: transparent;

--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -129,16 +129,31 @@
   border: none;
   margin: 0;
   margin-inline-start: 4px;
   opacity: 0.6;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
 }
 
+/* Support invertable icon flags and make icon white when it's on a blue background */
+.theme-light .devtools-tab[icon-invertable="light-theme"]:not([selected]) > image,
+.devtools-tab[icon-invertable="dark-theme"][selected] > image {
+  filter: invert(1);
+}
+
+/* Don't apply any filter to non-invertable command button icons */
+.command-button:not(.command-button-invertable),
+/* [icon-invertable="light-theme"] icons are white, so do not invert them for the dark theme */
+.theme-dark .devtools-tab[icon-invertable="light-theme"] > image,
+/* Since "highlighted" icons are green, we should omit the filter */
+.devtools-tab[icon-invertable][highlighted]:not([selected]) > image {
+  filter: none;
+}
+
 .devtools-tab > label {
   white-space: nowrap;
   margin: 0 4px;
 }
 
 .devtools-tab:hover > image {
   opacity: 0.8;
 }