Dark mode is ignored by interactive-examples

[danielzgtg]

Summary

The examples should be inverted just like as if Dark Reader is enabled. The iframe ending with mdnplay.dev/runner.html?blank=&theme=dark has theme=dark, so whatever it's supposed to do isn't working.

URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Reproduction steps

1. Set OS to dark mode
2. Open https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
3. Look at the Output at the bottom right of the "Try it" section, and be blinded by the light

Expected behavior

At least the background should be dark like those for interactive-example-choice:

With a simple hue rotate, which looks ugly but isn't the uncomfortable white from before:

With Dark Reader without "Detect dark theme":

Actual behavior

There is a patch of blinding white on the page:

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Linux

Screenshot

See above

Anything else?

I suggest something like either adding filter: invert(1) hue-rotate(180deg); to the iframe, or adding the same background color and text color CSS from the rest of the page.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.