Skip to content

v6: Make the Monaco editors follow the theme toggle#4396

Merged
trevor-scheer merged 2 commits into
graphiql-6from
trevor/monaco-theme-follow-toggle
Jul 10, 2026
Merged

v6: Make the Monaco editors follow the theme toggle#4396
trevor-scheer merged 2 commits into
graphiql-6from
trevor/monaco-theme-follow-toggle

Conversation

@trevor-scheer

@trevor-scheer trevor-scheer commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Changing the theme (Light/Dark/Auto) now recolors the Monaco editors too, not just the surrounding chrome. The toggle was writing data-theme on the container but never telling Monaco to switch, so the editors stayed on whatever theme they booted with.
  • The same effect that sets data-theme now also resolves the theme and calls monaco.editor.setTheme, so there's one place responsible for both.

Test plan

  • yarn workspace @graphiql/react test passes, including a new test that asserts monaco.editor.setTheme gets called on theme change.
  • Type a query, open Settings, switch to Light. The editors should turn light immediately (light background, dark tokens).
  • Switch back to Dark. Editors should return to dark immediately.
  • Set Auto with the OS in the opposite mode. Editors should match the OS.
  • Reload with Light persisted. Editors should boot light, no dark flash.

Refs: #4219

The settings theme toggle only wrote the `data-theme` attribute on the
container; the editors kept whatever theme they were given at startup.
Route the resolved theme through to `monaco.editor.setTheme` from the
same effect that owns `data-theme`, and drop the orphaned setter that
was only ever called on init.
@changeset-bot

changeset-bot Bot commented Jul 10, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6583269

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@graphiql/react Patch
graphiql Patch
@graphiql/plugin-code-exporter Patch
@graphiql/plugin-collections Patch
@graphiql/plugin-doc-explorer Patch
@graphiql/plugin-explorer Patch
@graphiql/plugin-history Patch
@graphiql/plugin-query-builder Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@trevor-scheer trevor-scheer marked this pull request as ready for review July 10, 2026 04:56
@trevor-scheer trevor-scheer merged commit 0df39f9 into graphiql-6 Jul 10, 2026
13 checks passed
@trevor-scheer trevor-scheer deleted the trevor/monaco-theme-follow-toggle branch July 10, 2026 04:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant