mdn / mdn/fred

Dark mode is ignored by `interactive-example`s

Open
#965 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

p1
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
  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:

hue rotate try it

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

invert hue rotate dark mode on element button try it

With Dark Reader without "Detect dark theme":

dark reader element button try it

Actual behavior

There is a patch of blinding white on the page:

element button try it blinding white

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.