Skip to content

Convert Copilot SVGs to data URIs with resolved colors #7124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: alexr00/yearling-asp
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Jun 27, 2025

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

  1. 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)
  2. Updated src/common/resources.ts:

    • Changed copilot icon type definitions from string to vscode.Uri
    • Updated icon initialization to use data URI functions instead of file paths

Color Variable Resolution

CSS Variable Resolved Color Usage
var(--vscode-list-errorForeground, currentColor) #f14c4c Error icon X symbol
var(--vscode-editorWarning-foreground, currentColor) #ff8c00 In-progress refresh arrows
var(--vscode-notebookStatusSuccessIcon-foreground, currentColor) #73c991 Success checkmark

Benefits

  • ✅ Icons display with correct colors in all contexts
  • ✅ No dependency on external CSS variables
  • ✅ Maintains backward compatibility (existing usage sites accept both string and vscode.Uri)
  • ✅ Uses existing DataUri.asImageDataURI pattern for consistency

The main copilot.svg was left unchanged as it uses fill="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.

@Copilot Copilot AI changed the title [WIP] Convert new Copilot SVGs to data URIs with resolved colors Convert Copilot SVGs to data URIs with resolved colors Jun 27, 2025
@Copilot Copilot AI requested a review from alexr00 June 27, 2025 10:36
Copilot finished work on behalf of alexr00 June 27, 2025 10:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants