Skip to content

Add dark/light/system theme chooser to workshop docs menu#1992

Merged
pelikhan merged 3 commits into
mainfrom
copilot/add-theme-chooser-menu
Jul 25, 2026
Merged

Add dark/light/system theme chooser to workshop docs menu#1992
pelikhan merged 3 commits into
mainfrom
copilot/add-theme-chooser-menu

Conversation

Copilot AI commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Adds a persistent theme chooser (Light / System / Dark) to the workshop docs sidebar menu, stored in localStorage.

Changes

  • Early theme restore — Inline <head> script applies stored data-color-mode before paint to eliminate flash of wrong theme
  • Menu footer UI — Segmented button group at the bottom of the menu panel; active choice reflected via aria-pressed
  • CSS dark-mode scoping — Existing @media (prefers-color-scheme: dark) blocks narrowed to html[data-color-mode="auto"]; added matching html[data-color-mode="dark"] rules so custom CSS variables (link colors, nav buttons) respond to forced-dark mode, not just system preference
  • JS theme managementapplyTheme(theme) sets data-color-mode on <html> and syncs aria-pressed; click handler persists to localStorage

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Comment thread scripts/build-docs.js Outdated
<link rel="stylesheet" href="primer.css">
<link rel="stylesheet" href="alerts.css">
<link rel="stylesheet" href="docs.css">
<script>(function(){var t=localStorage.getItem('workshop-color-mode');if(t==='light'||t==='dark'||t==='auto')document.documentElement.setAttribute('data-color-mode',t);}());</script>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@copilot move JavaScript to separate file

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done. Theme logic is now in scripts/static/docs-theme.js and copied to dist/docs-theme.js at build time. The HTML references it via <script src="docs-theme.js"> — no inline theme JS remains. (commit: Extract theme JS to scripts/static/docs-theme.js)

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot AI requested a review from pelikhan July 25, 2026 03:52
@pelikhan
pelikhan marked this pull request as ready for review July 25, 2026 03:54
Comment thread scripts/static/docs-theme.js Outdated
@@ -0,0 +1,22 @@
(function () {
var THEME_KEY = 'workshop-color-mode';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@copilot prepend with gh-aw-

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done — THEME_KEY is now 'gh-aw-workshop-color-mode' (commit: Prefix localStorage key with gh-aw-).

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot AI requested a review from pelikhan July 25, 2026 03:57
@pelikhan
pelikhan merged commit 45e53f6 into main Jul 25, 2026
@pelikhan
pelikhan deleted the copilot/add-theme-chooser-menu branch July 25, 2026 03:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants