-
Notifications
You must be signed in to change notification settings - Fork 27.9k
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
Use background color for input toggle active state #77481
Conversation
@@ -203,7 +203,8 @@ export const widgetShadow = registerColor('widget.shadow', { dark: '#000000', li | |||
export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBoxBackground', "Input box background.")); | |||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
Fixes #36439 as discussed in #36439 (comment)
Dark
Light
This adds
inputOption.activeBackground
on active toggle states (search, find widget, etc.). This also setsinputOption.activeBorder
to transparent as will only use outline on toggles for focus, as discussed in #36439 (comment). The new color is re-usingfocusBorder
so it works well with other themes. Sample below:cc @Tyriar @sandy081 @roblourens @bpasero @aeschli