Skip to content

Remove theme toggle, use browser color scheme #16781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mossaka merged 1 commit into from
Feb 19, 2026
Merged

Remove theme toggle, use browser color scheme #16781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 16 additions & 43 deletions docs/public/editor/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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) });
}

// ---------------------------------------------------------------
Expand All @@ -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; }
Expand Down Expand Up @@ -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());
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
darkMq.addEventListener('change', () => applyCmTheme());
if (darkMq && typeof darkMq.addEventListener === 'function') {
darkMq.addEventListener('change', () => applyCmTheme());
} else if (darkMq && typeof darkMq.addListener === 'function') {
darkMq.addListener(applyCmTheme);
}

Copilot uses AI. Check for mistakes.

// ---------------------------------------------------------------
// Sample selector + deep-link loading
Expand Down
12 changes: 0 additions & 12 deletions docs/public/editor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down