Is there a way of making the Active Tab Border highlighted on top instead of at the bottom?
Visual Studio-CodeVscode SettingsVisual Studio-Code Problem Overview
With the tab.activeBorder
you can highlight the bottom of the active tab, but how do you highlight the top of the tab instead, like in Firefox's current design?
An example of highlighting with tab.activeBorder
:
"workbench.colorCustomizations": { // Can customize each aspect
"[One Dark Pro]": { // Optional
"tab.activeBorder": "#0A84FF" // Active Tab Highlighting
}
},
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
You can visit the Theme Color VS Code web page to get more information on this.
> Open your user settings.json
(Ctrl + ,)
Two lines below the tab.activeBorder
, you will find tab.activeBorderTop
, which does exactly what you intended.
"workbench.colorCustomizations": { // Can customize each aspect
"[One Dark Pro]": { // Optional
"tab.activeBorderTop": "#0A84FF" // Active Tab Top Highlighting
}
},
Solution 2 - Visual Studio-Code
you can add this to .vscode/settings.json
"workbench.colorCustomizations": {
"tab.activeBorder": "#ff0000",
"tab.unfocusedActiveBorder": "#000000"
}
Solution 3 - Visual Studio-Code
You can also colorize background of tab:
"workbench.colorCustomizations": {
"tab.activeBackground": "#0000ff"
}
Solution 4 - Visual Studio-Code
- Go to Settings
- Type
colorCustomizations
in the link at the top - Against the option "Workbench: Color Customizations" select "Edit in settings.json" as shown in the image below
- Now add JSON values such as
"workbench.colorCustomizations": { "tab.activeBorderTop": "#12ff00", "tab.activeBackground": "#c41111" }