# Color Scheme Simulator doesn't work in Inspect Tool for extension debugging?

**URL:** <https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285>\
**Category:** Developer Tools\
**Tags:** feedback, issue\
**Created:** [April 11, 2025, 8:19am UTC](https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285 "2025-04-11T08:19:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CS-Account](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/cs-account/32/72787_2.png) [@CS-Account](https://discourse.mozilla.org/u/CS-Account)\
**Post date:** [April 11, 2025, 8:19am UTC](https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285/1 "2025-04-11T08:19:48Z")

</div>

![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/f/4/f40325d1f657dfc7ddcef7405fda68fa2f48f699.png)  
 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/a/9/a99a922aaf95a575b57f7e8bec3b117170920467.png)  
I’ve noticed that the Color Scheme Simulator is unusable when using the Inspect Tool for debugging extensions.

Specifically, the simulator buttons (light/dark/forced colour modes) are active and functional when inspecting regular web pages, but they are not there at all when inspecting temporary extensions. This makes it harder to test how extensions behave under different colour schemes.

I’ve attached screenshots to show the difference between a regular page and an extension context.

Is this a known limitation, an oversight, or something that I am missing? I feel like the Inspect Tool should support this for extensions as well. Would love to know if there’s a workaround or if this is something that could be fixed in a future release.

Thanks!

Edit: I did also try setting devtools.inspector.color-scheme-simulation.enabled, but that did not seem to affect this.

---

<div class="post-metadata">

**Author:** ![Nicolas\_Chevobbe](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nicolas_chevobbe/32/28203_2.png) [@Nicolas\_Chevobbe](https://discourse.mozilla.org/u/Nicolas_Chevobbe)\
**Post date:** [April 11, 2025, 8:37am UTC](https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285/2 "2025-04-11T08:37:47Z")

</div>

Thanks for the report. Which document would you want to simulation to be applied on? I guess you extension sidebar/popup ?

---

<div class="post-metadata">

**Author:** ![CS-Account](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/cs-account/32/72787_2.png) [@CS-Account](https://discourse.mozilla.org/u/CS-Account)\
**Post date:** [April 11, 2025, 8:40am UTC](https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285/3 "2025-04-11T08:40:42Z")

</div>

Yes indeed. I was working on the popup of an extension when I realized that I was able to access this when I was testing it served as a normal web-page (unrelated to Firefox tooling) but was unable to when inspecting it loaded as an extension.

So this would be with “Disable Popup Auto-Hide” enabled, and the popups HTML displayed.

---

<div class="post-metadata">

**Author:** ![Nicolas\_Chevobbe](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nicolas_chevobbe/32/28203_2.png) [@Nicolas\_Chevobbe](https://discourse.mozilla.org/u/Nicolas_Chevobbe)\
**Post date:** [April 11, 2025, 8:56am UTC](https://discourse.mozilla.org/t/color-scheme-simulator-doesnt-work-in-inspect-tool-for-extension-debugging/142285/4 "2025-04-11T08:56:03Z")

</div>

okay, thanks for your input

At the moment, we only show those buttons for the regular tab toolbox:

> **[rules.js - mozsearch](https://searchfox.org/mozilla-central/rev/19764d620c02025bdcc8d1f3c4fcf5a580407a01/devtools/client/inspector/rules/rules.js#574-582)**

```js
 * Enables the print and color scheme simulation only for local and remote tab debugging.
 */
async _initSimulationFeatures() {
  if (!this.inspector.commands.descriptorFront.isTabDescriptor) {
    return;
  }
  this.colorSchemeLightSimulationButton.removeAttribute("hidden");
  this.colorSchemeDarkSimulationButton.removeAttribute("hidden");
  this.printSimulationButton.removeAttribute("hidden");

```

I filed [1959921 - Enable light/dark simulation on webextension sidebar/popup documents](https://bugzilla.mozilla.org/show_bug.cgi?id=1959921) to look into this