Change:
To reproduce: install GitLens setopen an editor ! Originally posted by in
is an example how to apply a color to an icon from URL
Sorry for sending back, but there are many things to report here and I feel that doing a one-off fix in editor toolbar is wrong and just a band aid. Inconsistencies It looks like is not applied consistently everywhere. Notice how the view toolbars do not change, while the editor toolbar does change (these 2 are essentially the same part toolbars): <img width="1008" alt="Screenshot 2023-08-22 at 11 10 35" src=""I think the underlying reason is this CSS rule: Missing Adoptions The editor header really just uses a standard and imho should not be responsible for making this color work for entries, rather the component should do that: You can see that the same issue applies to other toolbars, such as the view toolbars, which is not surprising. Code Duplication There seems to be code involved to make the color work for SVG icons, but that code is heavily duplicated and should be reused:
I don't think assigning this issue to me and David is useful. I'm not familiar with toolbars.
I hear about this issue quite often from extension authors. They want to either add the CSS vars to the SVG code itself and have it respond to themes, or just have us do it automatically.
its unlikely a thing to fix in toolbars but more a thing to fix where we allow icons from extensions to enter our world, because in the end we only use Codicons and nothing else. I believe this is happening from where menus are being created based on : Which I think is the place to add the mask, but might know better.
I can help to get this working with the MenuEntryActionItem things. Those are created for contributed commands/menus and we do support SVG via this path.
thanks for the mask trick <img width="1139" alt="Screenshot 2023-08-31 at 12 10 56" src=""
I just updated to 1.83.0 and found this update has broken the ability for versionlens to show if its enabled or disabled via its icon. With previous versions of vscode it showed as enabled ! in 1.83.0 when the icon is enabled it is now masked ! I understand that theming icons is preferable but how can we specify enableddisable state with theme styles? For instance the icon for showing diff whitespaces has the ability to be enabled or disabled ! How do we implement the same behaviour for extensions?

Discussion:
*  Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ <del> import { $, addDisposableListener, append, asCSSUrl, EventType, ModifierKeyEmitter, prepend } from 'vs/base/browser/dom'; </del> <ins> import { $, addDisposableListener, append, asCSSUrl, EventType, ModifierKeyEmitter, prepend, reset } from 'vs/base/browser/dom'; </ins> import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { ActionViewItem, BaseActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; import { DropdownMenuActionViewItem, IDropdownMenuActionViewItemOptions } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';

}); } else { <del> // icon path/url label.style.backgroundImage = ( isDark(this._themeService.getColorTheme().type) ? asCSSUrl(icon.dark) : asCSSUrl(icon.light) ); </del> <ins> // icon path/url - add special element with SVG-mask and icon color background const svgUrl = isDark(this._themeService.getColorTheme().type) ? asCSSUrl(icon.dark) : asCSSUrl(icon.light); const svgIcon = $('span'); svgIcon.style.webkitMask = svgIcon.style.mask = `${svgUrl} no-repeat 50% 50%`; svgIcon.style.background = 'var(--vscode-icon-foreground)'; svgIcon.style.display = 'inline-block'; svgIcon.style.width = '100%'; svgIcon.style.height = '100%'; label.appendChild(svgIcon); </ins> label.classList.add('icon'); this._itemClassDispose.value = combinedDisposable( toDisposable(() => { <del> label.style.backgroundImage = ''; </del> label.classList.remove('icon'); <ins> reset(label); </ins> }), this._themeService.onDidColorThemeChange(() => { // refresh when the theme changes in case we go between dark <-> light

display: none; } <del> .monaco-workbench .part > .title > .title-actions .action-label.codicon { color: inherit; } </del> .monaco-workbench .part > .content { font-size: 13px; }