feat(canvas-kit): make the canvas follow the user's light/dark theme#20
Merged
Conversation
The host injects its theme-aware Primer tokens only after first paint, and the kit fallbacks were dark-only, so a light-theme user saw a dark flash. Worse, --ck-bg-inset aliased --background-color-emphasis (a dark chip color in light mode), which painted chips, filter pills, tab counts and the slider track as dark boxes on a light canvas. canvas-kit/theme.css (all 6 vendored copies, synced from the create-canvas-app kit; bumped to 2026-07-05.1): - Derive --ck-bg-inset from --ck-bg-muted + --ck-fg instead of the wrong emphasis token (dark stays ~#363c43, light becomes ~#d6d8db). - Add a prefers-color-scheme:light fallback plus color-scheme, both gated on :root:not([data-color-mode]) so the host stays fully in control the moment it injects its tokens. - Theme-neutral skeleton shimmer. code-tutor: map --lvl-*/--q-* and category colors to semantic and data Primer tokens so the hues track the theme; soften two dark-only shadows. 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
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.
Problem
Canvas extensions rendered dark even when the user's GitHub/app theme is light.
The host (github-app) already injects theme-aware Primer tokens onto the canvas document, but:
on_page_load(after first paint), and canvas-kittheme.csshad dark-only fallbacks, so a light-theme user saw a dark flash on every open (and any non-app context stayed dark).--ck-bg-insetaliased--background-color-emphasis, which is a dark chip color in Primer light (#25292e). Every inset surface (chips, filter pills, tab-count badges, slider track, code viewer, Q&A, prompts) rendered as a dark box on white.--lvl-*/--q-*/category hexes and tworgba(0,0,0,.4)shadows were tuned for dark only.Fix (kit-first, theme-aware)
canvas-kit/theme.css(all 6 vendored copies, synced from thecreate-canvas-appkit; bumped to2026-07-05.1):--ck-bg-insetfrom the theme-aware--ck-bg-muted+--ck-fginstead of the wrong emphasis token. Verified: dark stays~#363c43(no regression), light becomes~#d6d8db(a real recessed surface on white).prefers-color-scheme: lightfallback +color-scheme, both gated on:root:not([data-color-mode]). The host setsdata-color-modealongside its tokens and explicitcolor-scheme, so these back off the instant it themes the canvas and the host stays fully in control. This kills the dark flash for light users and makes non-app contexts follow the OS scheme.code-tutor: map
--lvl-*/--q-*to semantic tokens andCATEGORY_METAto Primer data tokens so hues track the theme; soften two dark-only shadows. The other canvases inherit the shared kit fix with no per-extension edits.Validation
Booted the canvases over loopback and rendered them in Chromium with real injected token sets across every path:
~#363c43(unchanged)node scripts/lint.mjs,node scripts/validate-extensions.mjs, andnode scripts/run-tests.mjsall green (the suites include the "theme.css ships the reduced-motion guard" and "no em dashes" checks).Companion change
canvas-kit is vendored from the
create-canvas-appskill (jongio/skills). The sametheme.css+ version change lands there in a companion PR so the copies do not drift on the next kit sync.