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

Question

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
    }
},

Answer 1

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
    }
},

Answer 2

you can add this to .vscode/settings.json

"workbench.colorCustomizations": {
    "tab.activeBorder": "#ff0000",
    "tab.unfocusedActiveBorder": "#000000"
}

It looks like this

Answer 3

You can also colorize background of tab:

"workbench.colorCustomizations": {
    "tab.activeBackground": "#0000ff"
}

Answer 4

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
4. Now add JSON values such as

   "workbench.colorCustomizations": {
       "tab.activeBorderTop": "#12ff00",
       "tab.activeBackground": "#c41111"
   }
   
   

Answer 5

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: Hovering over the options also shows the description: