From d9700da7ee15afde1bb163abdac8526f169cb933 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 25 Jul 2026 03:47:42 +0000 Subject: [PATCH 1/3] Add dark/light/system theme chooser to workshop docs menu Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- scripts/build-docs.js | 111 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 104 insertions(+), 7 deletions(-) diff --git a/scripts/build-docs.js b/scripts/build-docs.js index aadb71fa..bd6d6168 100644 --- a/scripts/build-docs.js +++ b/scripts/build-docs.js @@ -350,13 +350,19 @@ const docsCss = `/* Improve link discoverability in rendered workshop docs */ } @media (prefers-color-scheme: dark) { - :root { + html[data-color-mode="auto"] { --workshop-link-color: var(--fgColor-accent, #58a6ff); --workshop-link-visited-color: var(--fgColor-done, #bc8cff); --workshop-link-hover-color: var(--fgColor-accent, #79c0ff); } } +html[data-color-mode="dark"] { + --workshop-link-color: var(--fgColor-accent, #58a6ff); + --workshop-link-visited-color: var(--fgColor-done, #bc8cff); + --workshop-link-hover-color: var(--fgColor-accent, #79c0ff); +} + body, .markdown-body { font-family: 'Mona Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; @@ -733,28 +739,49 @@ html { } @media (prefers-color-scheme: dark) { - .workshop-nav-btn-primary { + html[data-color-mode="auto"] .workshop-nav-btn-primary { background-color: var(--bgColor-accent-emphasis, #1f6feb); color: #ffffff; } - .workshop-nav-btn-primary:hover, - .workshop-nav-btn-primary:focus-visible { + html[data-color-mode="auto"] .workshop-nav-btn-primary:hover, + html[data-color-mode="auto"] .workshop-nav-btn-primary:focus-visible { background-color: var(--bgColor-accent-emphasis, #1f6feb); color: #ffffff; filter: brightness(0.9); } - .workshop-nav-btn-secondary { + html[data-color-mode="auto"] .workshop-nav-btn-secondary { color: var(--fgColor-default, #e6edf3); background-color: var(--bgColor-muted, #161b22); border-color: var(--borderColor-default, #30363d); } - .workshop-nav-btn-secondary:hover, - .workshop-nav-btn-secondary:focus-visible { + html[data-color-mode="auto"] .workshop-nav-btn-secondary:hover, + html[data-color-mode="auto"] .workshop-nav-btn-secondary:focus-visible { color: var(--fgColor-default, #e6edf3); background-color: var(--bgColor-subtle, #1c2128); } } +html[data-color-mode="dark"] .workshop-nav-btn-primary { + background-color: var(--bgColor-accent-emphasis, #1f6feb); + color: #ffffff; +} +html[data-color-mode="dark"] .workshop-nav-btn-primary:hover, +html[data-color-mode="dark"] .workshop-nav-btn-primary:focus-visible { + background-color: var(--bgColor-accent-emphasis, #1f6feb); + color: #ffffff; + filter: brightness(0.9); +} +html[data-color-mode="dark"] .workshop-nav-btn-secondary { + color: var(--fgColor-default, #e6edf3); + background-color: var(--bgColor-muted, #161b22); + border-color: var(--borderColor-default, #30363d); +} +html[data-color-mode="dark"] .workshop-nav-btn-secondary:hover, +html[data-color-mode="dark"] .workshop-nav-btn-secondary:focus-visible { + color: var(--fgColor-default, #e6edf3); + background-color: var(--bgColor-subtle, #1c2128); +} + @media (max-width: 543px) { .workshop-navigation { flex-wrap: wrap; @@ -770,6 +797,46 @@ html { align-items: flex-start; } } + +.workshop-menu-footer { + flex: 0 0 auto; + padding: 12px 20px; + border-top: 1px solid var(--borderColor-muted, #d0d7de); +} +.workshop-theme-chooser { + display: flex; + border: 1px solid var(--borderColor-default, #d0d7de); + border-radius: 6px; + overflow: hidden; +} +.workshop-theme-btn { + flex: 1; + padding: 6px 4px; + font-size: 12px; + font-weight: 500; + font-family: inherit; + color: var(--fgColor-muted, #59636e); + background: transparent; + border: 0; + border-right: 1px solid var(--borderColor-default, #d0d7de); + cursor: pointer; +} +.workshop-theme-btn:last-child { + border-right: 0; +} +.workshop-theme-btn:hover { + background-color: var(--bgColor-muted, #f6f8fa); + color: var(--fgColor-default, #1f2328); +} +.workshop-theme-btn:focus-visible { + outline: 2px solid var(--fgColor-accent, #0969da); + outline-offset: -2px; +} +.workshop-theme-btn[aria-pressed="true"] { + background-color: var(--bgColor-accent-muted, #ddf4ff); + color: var(--fgColor-accent, #0969da); + font-weight: 600; +} `; fs.writeFileSync(path.join(distDir, 'docs.css'), docsCss); @@ -917,6 +984,7 @@ const page = ` +
@@ -934,6 +1002,13 @@ const page = ` + @@ -958,6 +1033,20 @@ ${htmlContent} const imageInspectorCaption = document.getElementById('image-inspector-title'); const menuLinks = Array.from(document.querySelectorAll('[data-workshop-page-link]')); const previewableImages = Array.from(document.querySelectorAll('.markdown-body img')); + const themeButtons = Array.from(document.querySelectorAll('[data-theme]')); + const THEME_KEY = 'workshop-color-mode'; + + function applyTheme(theme) { + document.documentElement.setAttribute('data-color-mode', theme); + themeButtons.forEach(function (btn) { + btn.setAttribute('aria-pressed', btn.dataset.theme === theme ? 'true' : 'false'); + }); + } + + (function initTheme() { + const stored = localStorage.getItem(THEME_KEY); + applyTheme(stored === 'light' || stored === 'dark' ? stored : 'auto'); + }()); function updateImageInspectorCaption(text) { if (text) { @@ -1065,6 +1154,14 @@ ${htmlContent} return; } + const themeBtn = e.target.closest('[data-theme]'); + if (themeBtn) { + const theme = themeBtn.dataset.theme; + localStorage.setItem(THEME_KEY, theme); + applyTheme(theme); + return; + } + if (e.target.closest('.markdown-body > details > summary')) { e.preventDefault(); return; From b8261f4654870063d00bbd44aae6dfc2e03c33be Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 25 Jul 2026 03:51:57 +0000 Subject: [PATCH 2/3] Extract theme JS to scripts/static/docs-theme.js separate file Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- scripts/build-docs.js | 28 +++++----------------------- scripts/static/docs-theme.js | 22 ++++++++++++++++++++++ 2 files changed, 27 insertions(+), 23 deletions(-) create mode 100644 scripts/static/docs-theme.js diff --git a/scripts/build-docs.js b/scripts/build-docs.js index bd6d6168..711f4809 100644 --- a/scripts/build-docs.js +++ b/scripts/build-docs.js @@ -272,6 +272,10 @@ if (fs.existsSync(workshopImagesDir)) { const faviconSrc = path.join(__dirname, 'static', 'favicon.svg'); fs.copyFileSync(faviconSrc, path.join(distDir, 'favicon.svg')); +// Copy theme chooser script +const docsThemeSrc = path.join(__dirname, 'static', 'docs-theme.js'); +fs.copyFileSync(docsThemeSrc, path.join(distDir, 'docs-theme.js')); + // Copy Primer CSS const primerCssSrc = path.join( __dirname, '..', 'node_modules', '@primer', 'css', 'dist', 'primer.css' @@ -984,7 +988,7 @@ const page = ` - +
@@ -1033,20 +1037,6 @@ ${htmlContent} const imageInspectorCaption = document.getElementById('image-inspector-title'); const menuLinks = Array.from(document.querySelectorAll('[data-workshop-page-link]')); const previewableImages = Array.from(document.querySelectorAll('.markdown-body img')); - const themeButtons = Array.from(document.querySelectorAll('[data-theme]')); - const THEME_KEY = 'workshop-color-mode'; - - function applyTheme(theme) { - document.documentElement.setAttribute('data-color-mode', theme); - themeButtons.forEach(function (btn) { - btn.setAttribute('aria-pressed', btn.dataset.theme === theme ? 'true' : 'false'); - }); - } - - (function initTheme() { - const stored = localStorage.getItem(THEME_KEY); - applyTheme(stored === 'light' || stored === 'dark' ? stored : 'auto'); - }()); function updateImageInspectorCaption(text) { if (text) { @@ -1154,14 +1144,6 @@ ${htmlContent} return; } - const themeBtn = e.target.closest('[data-theme]'); - if (themeBtn) { - const theme = themeBtn.dataset.theme; - localStorage.setItem(THEME_KEY, theme); - applyTheme(theme); - return; - } - if (e.target.closest('.markdown-body > details > summary')) { e.preventDefault(); return; diff --git a/scripts/static/docs-theme.js b/scripts/static/docs-theme.js new file mode 100644 index 00000000..df983fd4 --- /dev/null +++ b/scripts/static/docs-theme.js @@ -0,0 +1,22 @@ +(function () { + var THEME_KEY = 'workshop-color-mode'; + + function applyTheme(theme) { + document.documentElement.setAttribute('data-color-mode', theme); + var buttons = document.querySelectorAll('[data-theme]'); + for (var i = 0; i < buttons.length; i++) { + buttons[i].setAttribute('aria-pressed', buttons[i].dataset.theme === theme ? 'true' : 'false'); + } + } + + var stored = localStorage.getItem(THEME_KEY); + applyTheme(stored === 'light' || stored === 'dark' ? stored : 'auto'); + + document.addEventListener('click', function (e) { + var btn = e.target.closest('[data-theme]'); + if (!btn) return; + var theme = btn.dataset.theme; + localStorage.setItem(THEME_KEY, theme); + applyTheme(theme); + }); +}()); From fbbf3417aae74e866ed33d3954770e59c95a252d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 25 Jul 2026 03:57:06 +0000 Subject: [PATCH 3/3] Prefix localStorage key with gh-aw- Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- scripts/static/docs-theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/static/docs-theme.js b/scripts/static/docs-theme.js index df983fd4..0ed73ece 100644 --- a/scripts/static/docs-theme.js +++ b/scripts/static/docs-theme.js @@ -1,5 +1,5 @@ (function () { - var THEME_KEY = 'workshop-color-mode'; + var THEME_KEY = 'gh-aw-workshop-color-mode'; function applyTheme(theme) { document.documentElement.setAttribute('data-color-mode', theme);