Agents welcome: preview/import API for VS Code theme importer#313454
Merged
Agents welcome: preview/import API for VS Code theme importer#313454
Conversation
After signing in (or for first-launch signed-in users after clicking Get Started), show a theme selection step with 4 theme preview cards (Dark 2026, Dark HC, Light 2026, Light HC). Theme is applied live on card click. Continue button dismisses the overlay. External sign-in via onDidChangeDefaultAccount now transitions to the theme step instead of auto-completing. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Rename vsCodeThemeImporter folder to vscode, merge interface and service - Rename hostExtensionsPath to hostExtensionsHome returning URI - Move host environment paths to common environmentService Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Compare both id and label in theme extension matching - Move VS Code theme radio inside the radiogroup for accessibility - Add touch/tap support (Gesture.addTarget + TouchEventType.Tap) - Add touch-action: manipulation to theme cards and VS Code theme radio - Fix JSDoc for hostUserHome and importVSCodeTheme Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add previewVSCodeTheme() that installs from host location temporarily and returns IDisposable to uninstall on dispose - importVSCodeTheme() now: installs from host (preview), copies extension to agents app extensions dir, then replaces install from copied location - Walkthrough uses preview on select, import on Continue, dispose on Escape - Address PR feedback: touch support, accessibility, theme matching Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…me-theme # Conflicts: # src/vs/platform/environment/common/environment.ts # src/vs/sessions/contrib/welcome/browser/media/sessionsWalkthrough.css # src/vs/sessions/contrib/welcome/browser/sessionsWalkthrough.ts # src/vs/sessions/services/vscode/common/vsCodeThemeImporter.ts
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Agents welcome flow to add a theme-selection step that can preview and then permanently import the user’s active VS Code theme by temporarily installing (preview) and then copying/installing (import) the providing theme extension from the host VS Code installation.
Changes:
- Introduces
IVSCodeThemeImporterServicewithpreviewVSCodeTheme()(temporary install) andimportVSCodeTheme()(permanent copy + install). - Extends the Sessions walkthrough to include a theme step with onboarding themes plus an optional “Use My VS Code Theme” option, including tap support and new CSS.
- Adds host-environment path APIs (
hostUserHome,hostUserRoamingDataHome,hostExtensionsHome) and updates embedded-profile defaults to use them.
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/sessions.common.main.ts | Ensures the theme importer singleton is registered in the Sessions app entrypoint. |
| src/vs/sessions/services/vscode/common/vsCodeThemeImporter.ts | New service for resolving, previewing, and importing the host VS Code theme/extension. |
| src/vs/sessions/contrib/welcome/browser/welcome.contribution.ts | Routes sign-in completion to the new theme step instead of completing the walkthrough immediately. |
| src/vs/sessions/contrib/welcome/browser/sessionsWalkthrough.ts | Adds the theme-selection step UI and wires preview/import behavior. |
| src/vs/sessions/contrib/welcome/browser/media/sessionsWalkthrough.css | Styling for the new theme step and VS Code-theme option, including touch-action improvements. |
| src/vs/platform/userDataProfile/electron-main/userDataProfile.ts | Updates host agent-plugins path resolution for embedded mode. |
| src/vs/platform/environment/node/environmentService.ts | Removes node-only host roaming home getter (moved to common base class). |
| src/vs/platform/environment/common/environmentService.ts | Adds host path getters (hostUserHome, hostUserRoamingDataHome, hostExtensionsHome). |
| src/vs/platform/environment/common/environment.ts | Extends IEnvironmentService with host path properties used by Sessions features. |
Copilot's findings
Comments suppressed due to low confidence (1)
src/vs/sessions/contrib/welcome/browser/sessionsWalkthrough.ts:458
- The preview disposable is always disposed when the step tears down, even after a successful
importVSCodeTheme(). Because the preview disposable uninstalls by extension identifier, this can unintentionally uninstall the newly imported (permanent) extension right after import. Dispose and clear the preview installation before starting the permanent import (or otherwise ensure the preview cleanup doesn't uninstall once the user commits the import).
stepDisposables.add(addDisposableListener(continueBtn, EventType.CLICK, async () => {
if (isVSCodeThemeSelected) {
await this.vsCodeThemeImporter.importVSCodeTheme();
}
- Files reviewed: 4/4 changed files
- Comments generated: 3
- Apply theme in preview even when no extension install is needed - Return no-op disposable when theme is already available - Use @INativeEnvironmentService decorator matching the type Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…me-theme # Conflicts: # src/vs/platform/environment/common/environment.ts # src/vs/sessions/contrib/welcome/browser/media/sessionsWalkthrough.css # src/vs/sessions/contrib/welcome/browser/sessionsWalkthrough.ts # src/vs/sessions/services/vscode/common/vsCodeThemeImporter.ts
- Restore hostUserHome, hostExtensionsHome in common environmentService - Restore showThemeStep() calls in welcome.contribution - Restore vsCodeThemeImporter import in sessions.common.main - Fix preview flow: apply theme even when no install needed - Use @INativeEnvironmentService decorator - Increase theme picker card width to 1000px - Scale up theme preview thumbnails with min-height - Add spacing between tiles and VS Code Theme button Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
jrieken
previously approved these changes
Apr 30, 2026
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
- Updated the image source paths for theme previews in sessionsWalkthroughOverlay. - Added new SVG files for dark, high contrast dark, high contrast light, and light themes for 2026.
…s walkthrough Co-authored-by: Copilot <copilot@github.com>
lszomoru
approved these changes
Apr 30, 2026
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.
Refactors the VS Code theme importer service with preview/import separation and addresses PR feedback from #313333.
Theme Importer API changes
previewVSCodeTheme()— installs the providing extension temporarily from the host's extensions directory, applies the theme, and returns anIDisposablethat uninstalls the extension on disposeimportVSCodeTheme()— installs from host location (immediate), copies the extension to the Agents app's own extensions directory, then replaces the install from the copied location (permanent)Walkthrough integration
preview(temporary)import(permanent copy)PR #313333 feedback addressed
idandlabelin theme extension matchingradiogroupfor accessibilityGesture.addTarget+TouchEventType.Taptouch-action: manipulationCSS to eliminate 300ms tap delay