Bug: Interactive Editor doesn't honor theme after reload

[hu0p]

Summary

If you visit any page with a Code Mirror REPL/Interactive Editor (brought to you by Bob) and toggle the theme to the opposite of your system's preferred color scheme the interactive editor's theme will update but this will not persist for subsequent visits.

Where did you spot the bug?

Any page with an interactive editor will do e.g. JavaScript's Map Reference.

What is the problem?

Bob uses @media (prefers-color-scheme: ...) {...} to match the system's configured color scheme by default. Bob also listens for postMessages from the client with a defined theme. When the state is updated on the client by the user toggling the theme switcher, Bob updates the theme accordingly and sets the theme in localstorage. There is a call to fetch it and apply it onreadystatechange.

However, this doesn't seem to work. The key/value pair appears to never be set in localStorage for the relevant domain. This might be due in part because blocking third-party cookies appears to also mean blocking access to localStorage in frames to prevent user tracking, but the value is not set even if I temporarily allow all cookies. Additionally, the value is not respected even if I manually set it on the appropriate domain in DevTools (with all cookies temporarily allowed) but it does persist across visits.

This issue might be better suited for where Bob lives. If that's the case, let me know and I can cross-post it there. I just happened to start digging in and writing this up here first.

Anyway, one solution may be to always push the selected color scheme on hydration by calling switchTheme with dark inside a useEffect within the ThemeToggle component.

Lastly, I guess it's "BoB", not "Bob" but the latter just sounded a lot more fun. Bob's a fun guy.

What did you expect to happen?

The embedded interactive editor's theme should match the site-wide, user selected theme on subsequent visits.

Steps to reproduce the issue

1. Open https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map in Chrome.
2. Toggle the theme to the opposite of your system's preferred/configured color scheme.
3. Refresh the page.

Environment

Device

Desktop

Browser

Chrome: 98.0.4758.109 (Official Build) (x86_64)

Operating system

Mac OS: 12.2.1

Screenshots

[schalkneethling]

Thank you for reporting @hu0p! This is on my list to address today.

[hu0p]

@schalkneethling So using DOMContentLoaded instead of readystatechange did the trick? That one had me scratching my head for a second. I couldn't decide if it was a quirk of iframes I was unaware of or if it was just older code. Anyway, I tried that fix with localoverrides in DevTools but it was giving me a weird permission error (hence the cookie spiel). I should've just pulled down the repo.

Anyway, thanks for the fix and nice work!

[schalkneethling]

@schalkneethling So using DOMContentLoaded instead of readystatechange did the trick? That one had me scratching my head for a second. I couldn't decide if it was a quirk of iframes I was unaware of or if it was just older code. Anyway, I tried that fix with localoverrides in DevTools but it was giving me a weird permission error (hence the cookie spiel). I should've just pulled down the repo.

Anyway, thanks for the fix and nice work!

So, initially it had the wrong event listener syntax. Someone did addEventListener("onreadystatechange") which should actually be addEventListener("readystatechange"). I made that change but, when working on another issue I ran into this infinite recursion problem. Changing addEventListener("readystatechange") to addEventListener("DOMContentLoaded") fixed that.

[pilchard]

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