Dark mode is ignored by `interactive-example`s
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 233
- Forks
- 61
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 82
Description
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
- Set OS to dark mode
- Open https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the interactive-example iframe on the button documentation page, especially the mdnplay.dev/runner.html?blank=&theme=dark URL, and compare it with the interactive-example-choice behavior. Done means the example output has a dark background and readable colors when the OS is in dark mode, without the blinding white patch.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100