Is there a way of making the Active Tab Border highlighted on top instead of at the bottom?

Visual Studio-CodeVscode Settings

Visual 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

  1. Go to Settings
  2. Type colorCustomizations in the link at the top
  3. Against the option "Workbench: Color Customizations" select "Edit in settings.json" as shown in the image below enter image description here
  4. Now add JSON values such as
    "workbench.colorCustomizations": {
        "tab.activeBorderTop": "#12ff00",
        "tab.activeBackground": "#c41111"
    }
    
    

Solution 5 - Visual Studio-Code

Just to chime a little. Once you are in the json settings files and you have helper turned on (I forget what that setting is called), you can see a popup of all the options when you type the opening quote: settings options popup with all the options Hovering over the options also shows the description:description while hovering

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhilippe FanaroView Question on Stackoverflow
Solution 1 - Visual Studio-CodePhilippe FanaroView Answer on Stackoverflow
Solution 2 - Visual Studio-Codetbo47View Answer on Stackoverflow
Solution 3 - Visual Studio-CodeZvezdochkaView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeAmolView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeThomas OatmanView Answer on Stackoverflow