Change:
Testing <img width="273" alt="image" src=""Should use a toggle state instead, or a new icon. You can see it looks the same as the other disabled action
I agree, but then this also applies to the "toggle whitespace" button. I think we need some pressed state for toolbar buttons. What are your thoughts ?
I'd prefer to have an icon per state. That's how we have done it in other toolbars (like output scroll lock).
<img width="584" alt="image" src=""Mockup with a toggled state. Having an icon per state makes sense for the lock icon, because the reverse icon metaphors make intuitive sense. This is not the case for the whitespace and fold icon here though. cc
We do use toggles elsewhere. One easy example: <img width="472" alt="CleanShot 2023-07-07 at 09 13 11 src=""But I think it depends what you're trying to do. Many boolean settings make sense as a sort of enabled/disabled toggle, while others are more specific metaphors (lock/unlock as Hylke mentioned above).
I'm still in favor of a toggle border as we already use this concept in the find widget and it is a universally understood concept, but has to agree. Alternatively, we can explore other icons. Or we leave it as is.
No, I don't need to agree (but also not to like it). If you wanna explore or something similar go ahead but we should be aware that this is also open to extensions, so we need to deal with every (contributed) button looking like this in the future
I think this approach looks good to me It is more aligned with the vs code current design and should be replaced the current find widget toggle ui
Verification steps: Notice that in the diff editor buttons have a background now to indicate their toggled state: !

Discussion:
"list.activeSelectionIconForeground": "#FFF", "terminal.inactiveSelectionBackground": "#3A3D41", "widget.border": "#303031", <ins> "actionBar.toggledBackground": "#383a49" </ins> }, "tokenColors": [ {

"editor.selectionBackground": "#FFFFFF", "statusBarItem.remoteBackground": "#00000000", "ports.iconRunningProcessForeground": "#FFFFFF", <del> "editorWhitespace.foreground": "#7c7c7c" </del> <ins> "editorWhitespace.foreground": "#7c7c7c", "actionBar.toggledBackground": "#383a49" </ins> }, "tokenColors": [ {

"foreground": "#800080" } } <del> ] </del> <ins> ], "colors": { "actionBar.toggledBackground": "#dddddd" } </ins> }

"list.activeSelectionIconForeground": "#FFF", "list.focusAndSelectionOutline": "#90C2F9", "terminal.inactiveSelectionBackground": "#E5EBF1", <del> "widget.border": "#d4d4d4" </del> <ins> "widget.border": "#d4d4d4", "actionBar.toggledBackground": "#dddddd" </ins> }, "tokenColors": [ {

import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions'; import { createDecorator, IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; <del> import { registerColor } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { inputActiveOptionBackground, registerColor } from 'vs/platform/theme/common/colorRegistry'; </ins> registerColor( 'actionBar.toggledBackground', <del> { dark: '#383a49', light: '#dddddd', hcDark: '#383a49', hcLight: '#dddddd', }, </del> <ins> { dark: inputActiveOptionBackground, light: inputActiveOptionBackground, hcDark: inputActiveOptionBackground, hcLight: inputActiveOptionBackground, }, </ins> localize('actionBar.toggledBackground', 'Background color for toggled action items in action bar.') );