Feature Request: Add Separate Border Theming for Secondary Buttons

[yyyanghj]

Hi, VS Code team,

I'm currently developing a theme extension and would like to implement distinct styling for secondary buttons to better differentiate them from primary buttons.

My current approach is:

• Primary buttons: Filled style
• Secondary buttons: Outline style

This visual distinction follows common design patterns.

Currently, we have a button.border in theme configuration that maps to --vscode-button-border CSS Variable. We can utilize this to create outline-style buttons.

If you zoom in on the screenshot and examine the details, you'll notice the primary button's border doesn't match well with its background color.This occurs because button.border is applied to both primary and secondary buttons.

My VS Code version: 1.98.2

I'm not sure if there's a workaround or additional configurations to address this issue.

If not, I'd like to propose adding a button.secondaryBorder configuration to allow separate border styling for primary and secondary buttons.

// theme.json
{
  "button.background": "#3f3f47", // primary buttons background
  "button.border": "#3f3f47", // primary buttons border
  
  "button.secondaryBackground": "#00000000", // secondary buttons apply outline style with transparnt background 
+ "button.secondaryBorder": "#959077" // secondary buttons border, **new configuration**
}

I'm curious whether the VS Code team has plans to implement this feature. Alternatively, I'd be happy to contribute a PR for this change.

Thank you.

[iwangbowen]

Yes, we need this configuration

[kkbrooks]

Hi @yyyanghj while we think there are possibilities to add an outline-style button to VS Code, we do not plan to fully replace our existing secondary button style with an outline button.