Remove theme toggle button and use browser's preferred color scheme (#16781)

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>

Author: Mossaka

docs/public/editor/editor.js

@@ -121,7 +121,6 @@ const errorBanner = $('errorBanner');
 const errorText = $('errorText');
 const warningBanner = $('warningBanner');
 const warningText = $('warningText');
-const themeToggle = $('themeToggle');
 const divider = $('divider');
 const panelEditor = $('panelEditor');
 const panelOutput = $('panelOutput');
@@ -138,38 +137,26 @@ let currentYaml = '';
 let pendingCompile = false;
 
 // ---------------------------------------------------------------
-// Theme (uses Primer's data-color-mode)
+// Theme — follows browser's prefers-color-scheme automatically.
+// Primer CSS handles the page via data-color-mode="auto".
+// We only need to toggle the CodeMirror theme (oneDark vs default).
 // ---------------------------------------------------------------
 const editorThemeConfig = new Compartment();
 const outputThemeConfig = new Compartment();
+const darkMq = window.matchMedia('(prefers-color-scheme: dark)');
 
-function getPreferredTheme() {
-  const saved = localStorage.getItem('gh-aw-playground-theme');
-  if (saved) return saved;
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+function isDark() {
+  return darkMq.matches;
 }
 
-function cmThemeFor(theme) {
-  return theme === 'dark' ? oneDark : [];
+function cmThemeFor(dark) {
+  return dark ? oneDark : [];
 }
 
-function setTheme(theme) {
-  document.documentElement.setAttribute('data-color-mode', theme);
-  localStorage.setItem('gh-aw-playground-theme', theme);
-  const sunIcon = themeToggle.querySelector('.icon-sun');
-  const moonIcon = themeToggle.querySelector('.icon-moon');
-  if (theme === 'dark') {
-    sunIcon.style.display = 'block';
-    moonIcon.style.display = 'none';
-  } else {
-    sunIcon.style.display = 'none';
-    moonIcon.style.display = 'block';
-  }
-
-  // Update CodeMirror themes
-  const cmTheme = cmThemeFor(theme);
-  editorView.dispatch({ effects: editorThemeConfig.reconfigure(cmTheme) });
-  outputView.dispatch({ effects: outputThemeConfig.reconfigure(cmTheme) });
+function applyCmTheme() {
+  const theme = cmThemeFor(isDark());
+  editorView.dispatch({ effects: editorThemeConfig.reconfigure(theme) });
+  outputView.dispatch({ effects: outputThemeConfig.reconfigure(theme) });
 }
 
 // ---------------------------------------------------------------
@@ -182,7 +169,7 @@ const editorView = new EditorView({
     markdown(),
     EditorState.tabSize.of(2),
     indentUnit.of('  '),
-    editorThemeConfig.of(cmThemeFor(getPreferredTheme())),
+    editorThemeConfig.of(cmThemeFor(isDark())),
     keymap.of([{
       key: 'Mod-Enter',
       run: () => { doCompile(); return true; }
@@ -210,27 +197,13 @@ const outputView = new EditorView({
     yaml(),
     EditorState.readOnly.of(true),
     EditorView.editable.of(false),
-    outputThemeConfig.of(cmThemeFor(getPreferredTheme())),
+    outputThemeConfig.of(cmThemeFor(isDark())),
   ],
   parent: outputMount,
 });
 
-// ---------------------------------------------------------------
-// Apply initial theme + listen for changes
-// ---------------------------------------------------------------
-setTheme(getPreferredTheme());
-
-themeToggle.addEventListener('click', () => {
-  const current = document.documentElement.getAttribute('data-color-mode');
-  setTheme(current === 'dark' ? 'light' : 'dark');
-});
-
-// Listen for OS theme changes
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-  if (!localStorage.getItem('gh-aw-playground-theme')) {
-    setTheme(e.matches ? 'dark' : 'light');
-  }
-});
+// Listen for OS theme changes and update CodeMirror accordingly
+darkMq.addEventListener('change', () => applyCmTheme());
 
 // ---------------------------------------------------------------
 // Sample selector + deep-link loading

docs/public/editor/index.html

@@ -160,18 +160,6 @@
       <span id="statusText">Loading...</span>
     </span>
 
-    <div class="d-flex flex-items-center gap-3 ml-auto">
-      <button class="btn-octicon" id="themeToggle" title="Toggle theme" aria-label="Toggle dark mode">
-        <!-- Sun icon (shown in dark mode) -->
-        <svg class="icon-sun octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="display:none">
-          <path d="M8 12a4 4 0 100-8 4 4 0 000 8zm0-1.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm5.657-8.157a.75.75 0 010 1.06l-1.061 1.06a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm13 0a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zm-8 8a.75.75 0 01-.75-.75v-1.5a.75.75 0 011.5 0v1.5A.75.75 0 018 16zm-5.657-2.343a.75.75 0 010-1.06l1.06-1.061a.75.75 0 111.06 1.06l-1.06 1.06a.75.75 0 01-1.06 0zm12.728 0l-1.06-1.06a.75.75 0 011.06-1.061l1.06 1.06a.75.75 0 01-1.06 1.06z"/>
-        </svg>
-        <!-- Moon icon (shown in light mode) -->
-        <svg class="icon-moon octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-          <path d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"/>
-        </svg>
-      </button>
-    </div>
   </header>
 
   <!-- Error Banner -->