Use background color for input toggle active state#77481
Use background color for input toggle active state#77481miguelsolorio merged 4 commits intomasterfrom
Conversation
| export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); | ||
| export const inputBorder = registerColor('input.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('inputBoxBorder', "Input box border.")); | ||
| export const inputActiveOptionBorder = registerColor('inputOption.activeBorder', { dark: '#007ACC', light: '#007ACC', hc: activeContrastBorder }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields.")); | ||
| export const inputActiveOptionBorder = registerColor('inputOption.activeBorder', { dark: '#007ACC00', light: '#007ACC00', hc: '#007ACC00' }, nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields.")); |
There was a problem hiding this comment.
@isidorn Also, not sure if you can help me understand why setting inputOption.activeBorder to null results in the colors not updating when being toggled via workbench.colorCustomizations. Ideally this should be null but can only get it to work when setting it to a transparent color.
|
Updated the colors for high contrast mode:
|
roblourens
left a comment
roblourens
left a comment
There was a problem hiding this comment.
Looks great! Does this affect other checkboxes or just the ones in the find input? Does it look good with other popular themes?
|
@roblourens doesn't affect other checkboxes, just the toggle ones like exclude and search widget. Here's what it looks like in other themes, some explicitly set
|
|
Ok cool, how about the checkboxes in the settings editor? (sorry I could build it myself but my repo is in the middle of something else) |
|
@roblourens doesn't affect checkboxes in the settings editor as it's not a toggle:
|
|
@misolori I was out on vacation, sorry for not responding. |
3 participants
Fixes #36439 as discussed in #36439 (comment)
Dark
Light
This adds
inputOption.activeBackgroundon active toggle states (search, find widget, etc.). This also setsinputOption.activeBorderto transparent as will only use outline on toggles for focus, as discussed in #36439 (comment). The new color is re-usingfocusBorderso it works well with other themes. Sample below:cc @Tyriar @sandy081 @roblourens @bpasero @aeschli