feat(scenes): carry chromeTheme into the picture-in-picture window - #38
Merged
Conversation
The pip window is a separate document that never loads kino.css, so its
controls kept a hardcoded dark palette and its body a hardcoded black, which
read as a dark player bolted onto a light one the moment a lesson ran in
light mode.
The overlay now injects a small token sheet into the pip document, dark on
the root with a light block keyed on data-kino-theme, so every color it
paints is themeable and a flip is one attribute change on a live window.
mountPipOverlay returns a handle ({ setTheme, destroy }) instead of a bare
cleanup so the theme can change while the window stays open.
createScenesProvider takes a chromeTheme option, ScenesProvider gains
setChromeTheme, and ScenesPlayer wires both to the chromeTheme prop it
already had, matching how sceneTheme rides the wire to the host.
The pip window backdrop follows sceneTheme rather than chromeTheme: it is
what shows before the mirrored stage paints, so it belongs to the stage.
colorScheme on the pip document follows it too.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
kino | 68ca82f | Commit Preview URL Branch Preview URL |
Jul 24 2026, 07:25 PM |
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.
Follow-up to #36, which themed the in-page pip placeholder. This one covers the pip window itself, the piece I called out as out of scope there.
What was wrong
The pip window is a separate document that never loads
kino.css, somountPipOverlaystyled everything with hardcoded dark literals (bar gradient torgba(0,0,0,0.85),#ffficons, white progress) and the provider painted the window body#000. In light mode that read as a dark player bolted onto a light one, plus a black flash behind a light stage before the mirror painted.The fix
[data-kino-theme="light"], mirroring how.kinothemes itself. Layout stays inline; every color is now a token, so a flip is one attribute change.mountPipOverlayreturns{ setTheme, destroy }instead of a bare cleanup, so the theme can change while the window stays open. Internal API, not exported from the package.createScenesProvidertakeschromeTheme;ScenesProvidergainssetChromeTheme.ScenesPlayerwires both to thechromeThemeprop it already had, mirroring howsceneThemeseeds the host then flips live.sceneTheme, notchromeTheme: it is what shows before the mirrored stage paints, so it belongs to the stage.colorSchemeon the pip document follows it too.pipStageBackdropis opaque in both themes.Defaults are unchanged: omit both props and dark chrome over a black backdrop is exactly what shipped.
Verification
pnpm test(210 passing, 6 new),pnpm typecheck,pnpm lint,pnpm format:check.setSceneThemelive, and a chrome flip outside pip seeding the next window.