feat(create-canvas-app): make the canvas kit theme-aware (light/dark) - #25
Merged
Conversation
kit/theme.css: derive --ck-bg-inset from --ck-bg-muted + --ck-fg (drops the wrong --background-color-emphasis alias, which is a dark chip color in light mode and painted inset surfaces as dark boxes on a light canvas), add a prefers-color-scheme:light fallback plus color-scheme gated on :root:not([data-color-mode]) so the host stays in control once it injects its tokens after first paint, and use a theme-neutral skeleton shimmer. Bumps the kit to 2026-07-05.1. Vendored into jongio/copilot-extensions via sync-kit (companion PR). Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
…7-05.1 The theme-aware kit change bumped kit/theme.css + kit/version.mjs but left reference/decision-log/canvas-kit/ at 2026-07-04.1, so kit-parity and freshness checks fail. Re-run sync-kit.mjs to mirror kit/ into the reference decision-log example (theme.css, version.mjs, .kit-version.json). Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Makes the create-canvas-app canvas kit theme-aware so a canvas follows the user's light/dark theme instead of always rendering dark.
The host (github-app) injects theme-aware Primer tokens onto the canvas document, but only in
on_page_load(after first paint), and the kit fallbacks were dark-only, so light-theme users saw a dark flash.--ck-bg-insetalso aliased--background-color-emphasis, a dark chip color in light mode, which painted chips, filter pills, tab-count badges and slider tracks as dark boxes on a light canvas.Changes to
kit/theme.css--ck-bg-insetfrom--ck-bg-muted+--ck-fginstead of the wrong emphasis token (dark stays ~#363c43, light becomes ~#d6d8db).prefers-color-scheme: lightfallback pluscolor-scheme, both gated on:root:not([data-color-mode])so the host stays fully in control the moment it injects its tokens (it setsdata-color-modealongside them and an explicitcolor-scheme).Bumps the kit to
2026-07-05.1.Validation
Verified in Chromium across every path: un-injected OS light and dark, injected light over OS-dark (host wins), and injected dark (inset unchanged). Vendored into jongio/copilot-extensions#20 via
sync-kit, whose lint, validate, and smoke suites pass.