From 9537e52464e44248be6cac4c7b12ddd35c5cec08 Mon Sep 17 00:00:00 2001 From: "Jiaxiao (mossaka) Zhou" Date: Thu, 19 Feb 2026 08:00:33 +0000 Subject: [PATCH] Remove theme toggle button and use browser's preferred color scheme 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) --- docs/public/editor/editor.js | 59 ++++++++++------------------------- docs/public/editor/index.html | 12 ------- 2 files changed, 16 insertions(+), 55 deletions(-) diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js index 11ff0ba76dc..fcee0d5e754 100644 --- a/docs/public/editor/editor.js +++ b/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 diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html index 7983c7d354a..52363521c92 100644 --- a/docs/public/editor/index.html +++ b/docs/public/editor/index.html @@ -160,18 +160,6 @@ Loading... -
- -