Interactive examples are sometimes still not adhering to the current theme

[schalkneethling]

Is this considered fixed? I'm still experiencing inconsistent theme adherance.

What is the problem?

If the theme is toggled to light mode on a page without an interactive editor, subsequently navigating to a page with an interactive editor will display the editor in dark mode.

Steps to reproduce the issue

1. With dark mode toggle on navigate to a page without an Interactive Editor (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
2. Toggle light mode on
3. Navigate to a page with an Interactive Editor (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

Environment

Device

Desktop

Browsers

Firefox: 98.0.1 (64-bit)
Chrome: Version 99.0.4844.51 (Official Build) (x86_64)
Brave: Version 1.36.112 Chromium: 99.0.4844.51 (Official Build) (x86_64)
Safari: Version 15.3 (17612.4.9.1.8)

Operating system

Mac OS: 12.2.1

Originally posted by @pilchard in mdn/yari#5428 (comment)

[schalkneethling]

Thank you, @pilchard. I have seen there are some edge cases where this is still problematic.

[caugner]

The reason for this is that we postMessage the new theme to all IEx iframes on the page whenever the theme changes, which in turn stores the theme in IEx localStorage (which is independent from MDN localStorage!). However, when the page has no IEx iframe, that message gets lost and the old theme is still stored in IEx localStorage.

A solution would be to have either IEx iframes "ask" their MDN parent for the current theme, or to have the MDN parent listen for IEx iframes using MutationObserver or similar and postMessage the current theme proactively.

[caugner]

This should be resolved with migrating interactive examples inline, so we won't fix it in bob, which is in the process of being archived.