Convert Copilot SVGs to data URIs with resolved colors #7124
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
The new Copilot SVGs use CSS color variables (
var(--vscode-list-errorForeground, currentColor)
, etc.) but since they are fetched as external resources, these variables are not applied, resulting in incorrect colors being displayed.Solution
This PR converts the 3 Copilot status SVGs to data URIs with the CSS color variables resolved to actual color values, ensuring correct colors are used regardless of how the SVGs are loaded.
Changes Made
Added data URI conversion functions in
src/common/uri.ts
:copilotErrorAsImageDataURI()
- converts error SVG with resolved red color (#f14c4c
)copilotInProgressAsImageDataURI()
- converts in-progress SVG with resolved orange color (#ff8c00
)copilotSuccessAsImageDataURI()
- converts success SVG with resolved green color (#73c991
)Updated
src/common/resources.ts
:string
tovscode.Uri
Color Variable Resolution
var(--vscode-list-errorForeground, currentColor)
#f14c4c
var(--vscode-editorWarning-foreground, currentColor)
#ff8c00
var(--vscode-notebookStatusSuccessIcon-foreground, currentColor)
#73c991
Benefits
string
andvscode.Uri
)DataUri.asImageDataURI
pattern for consistencyThe main
copilot.svg
was left unchanged as it usesfill="currentColor"
which correctly inherits color from context.💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.