Remove theme toggle, use browser color scheme#16781
Conversation
The editor now follows the browser's prefers-color-scheme media query instead of providing a manual sun/moon toggle button. Primer CSS already supports data-color-mode="auto", so we just needed to remove the manual override and wire CodeMirror's theme to the media query listener. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Removes the manual theme toggle from the playground editor UI and switches theming to follow the browser/OS prefers-color-scheme setting automatically, using Primer’s data-color-mode="auto" for page styles and a matchMedia listener for CodeMirror.
Changes:
- Removed the sun/moon theme toggle button from the editor header.
- Dropped localStorage-driven theme persistence and manual toggling logic.
- Added a
prefers-color-schemelistener to reconfigure CodeMirror themes at runtime.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| docs/public/editor/index.html | Removes the theme toggle button from the header; keeps data-color-mode="auto" on <html> for Primer auto theming. |
| docs/public/editor/editor.js | Simplifies theme logic to follow prefers-color-scheme and updates CodeMirror theme via matchMedia changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
| }); | ||
| // Listen for OS theme changes and update CodeMirror accordingly | ||
| darkMq.addEventListener('change', () => applyCmTheme()); |
There was a problem hiding this comment.
MediaQueryList.addEventListener('change', …) isn’t supported in some browsers (notably older Safari); calling it can throw and break the editor. Consider adding a compatibility fallback (e.g., use addListener when addEventListener is unavailable) so the playground still works across the browsers the docs site targets.
| darkMq.addEventListener('change', () => applyCmTheme()); | |
| if (darkMq && typeof darkMq.addEventListener === 'function') { | |
| darkMq.addEventListener('change', () => applyCmTheme()); | |
| } else if (darkMq && typeof darkMq.addListener === 'function') { | |
| darkMq.addListener(applyCmTheme); | |
| } |
1 participant
Summary
prefers-color-schemepreference (light or dark mode)data-color-mode="auto"on the<html>element, so page styles adapt nativelymatchMedialistenerTest plan
🤖 Generated with Claude Code