Closed pouyakary closed 1 year ago
@DanTup does your extension use an icon font or SVGs?
This came up at https://github.com/dart-lang/sdk/issues/53690, although this just looks like an undocked toolbar and not specific to the command center?
Yes - it unrelated to CC but a consequence (regression) from https://github.com/microsoft/vscode/issues/190679 which applies theming colors to SVG based icons too.
/cc @pflannery
So, we did this change on purpose so that theme colors (for icons) can be applied uniformly across the different icon types. Tho, I do acknowledge
so that theme colors (for icons) can be applied to uniformly across the different icon types
What's the correct way to colour icons with specific colours in this case? (for example the stop button is still red)?
It also seems like the icon has been stretched in some way - do you know what's causing that?
What's the correct way to colour icons with specific colours in this case? (for example the stop button is still red)?
/cc @aeschli for that
It also seems like the icon has been stretched in some way - do you know what's causing that?
I believe there is some transparent border around the flash which is now visible/coloured
@jrieken I've been looking at this today and I've discovered that when loading svg's using -webkit-mask
the svg colours are interpreted as an alpha value. I.E. where black is invisible and white is fully visible.
It also seems that this change has made the light and dark options under contributes\commands
in the package.json obsolete? as now there isn't really anything we can do with those options.
I've found a way to make svg icons to appear enabled or not. This involves using the svg mask element to create a semi transparent background.
I'm not able to resolve the red error icon that versionlens previously used so I've had to change the icon to look like a warning.
imo I think it would be better that an extension author has ownership over their icons. Users can create requests with those authors regarding theme compatibility. Perhaps vscode could even allow extension icons to be overridden by theme authors or users similar to how Product Icons are?
imo I think it would be better that an extension author has ownership over their icons
I agree. Some of the built-in icons already have their own colours, so it seems clear that making them all the same isn't a good option.
If this must be supported, perhaps it could be done with a flag that says whether an icon should inherit a theme colour or not?
@jrieken is there any workaround we could apply until this is resolved? We have multiple icons that show up in different contexts and they all look pretty bad now:
Similar issue wwith VsCode SFDX Hardis.
Before:
After:
I agree. Some of the built-in icons already have their own colours, so it seems clear that making them all the same isn't a good option.
This wasn't about making them all the same but about making them configurable. The idea being that that "all yellow theme" can tweak the dart-debug-flash to a better fit. That's what motivated and justified this change. Tho, I do see the technical limitations of the mask-approach and therefore we should revisit this.
The gist is that
Also note that we have the codicon-font from which extensions can use icons, e.g the dart flash and magnifier could be zap
and search
. Check them out here https://microsoft.github.io/vscode-codicons/dist/codicon.html
we invite extension authors to adopt our CSS variables for theming SVG
Does this mean in SVG icons we will be able to choose between our own hard-coded colours, or using variables that would be inherited from a theme? If so, that sounds great.
Some of the icons used in Dart were picked to match the icons that appear in DevTools (an external tool we embed) which come from the Material icons. Are custom icon fonts supported? And if we do use an icon font, will we still be able to override the colour where it makes sense, or will this be restricted to SVGs?
Verified in 1.83.1 candidate
Type: Bug
The Flutter extension (as well as many other extensions) put extra icons in the debug controls:
Now that the controls can be placed on the command center (#192592) it seems that some of them break:
I don't know if this is something that the author should fix or it is due to the changes in the vscode (Perhaps @DanTup should have a look as well) but I think its a breaking change that effects many other extensions as well.
VS Code version: Code - Insiders 1.83.0-insider (4268e464763087044d0c1b5bdd37ebbe683cadfa, 2023-09-29T20:44:05.310Z) OS version: Darwin arm64 23.0.0 Modes:
System Info
|Item|Value| |---|---| |CPUs|Apple M1 (8 x 24)| |GPU Status|2d_canvas: enabledcanvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|3, 3, 3| |Memory (System)|8.00GB (0.09GB free)| |Process Argv|| |Screen Reader|no| |VM|0%|
Extensions (13)
Extension|Author (truncated)|Version ---|---|--- Bookmarks|ale|13.4.1 dart-code|Dar|3.75.20231002 flutter|Dar|3.74.0 copilot|Git|1.121.461 copilot-chat|Git|0.8.2023092902 todo-tree|Gru|0.0.226 comment|kar|23.3.0 justifier|kar|0.0.5 moves|kar|1.0.1 theme-karyfoundation-themes|kar|34.3.0 virtuous-vscode|kar|0.0.7 code-spell-checker|str|3.0.1 tldraw-vscode|tld|2.0.11