Change active tab color vscode (ok)

157

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

ShareImprove this questionFollowasked Nov 30, 2019 at 23:04psygo7,59377 gold badges6060 silver badges106106 bronze badges

• 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: i.sstatic.net/4GIzd.png – Thomas Oatman CommentedMar 7, 2022 at 19:38

• great question. the fact that by default the active tabs are almost impossible to differentiate does my head in – Richard Hunter CommentedApr 21, 2024 at 9:35

Add a comment

5 Answers

Sorted by: Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 199

you can add this to .vscode/settings.json

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

It looks like this

ShareImprove this answerFollowedited Jul 6, 2022 at 15:41Mauricio Gracia Gutierrez10.9k77 gold badges7979 silver badges111111 bronze badgesanswered Nov 12, 2020 at 22:09tbo473,32933 gold badges2222 silver badges1313 bronze badges

• 8adding "tab.activeBackground": "#26549e" is also helpful for highlighting the entire tab – stu CommentedMay 20, 2023 at 13:51

• If you have N split panes, this only highlights one tab. Is there any way to highlight N instead? – dshin CommentedSep 19, 2023 at 14:01

Add a commentReport this ad167

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

ShareImprove this answerFollowedited Nov 25, 2020 at 14:26answered Nov 30, 2019 at 23:04psygo7,59377 gold badges6060 silver badges106106 bronze badges

• 3Where is this file located ? – user4987870 CommentedJun 5, 2020 at 23:22

• 2It doesn't work for me when it was Inside the theme section. The error was "Property is not allowed". But it had worked when I have moved it into section "workbench.colorCustomizations" (outside theme section) – Zvezdochka CommentedJul 21, 2021 at 11:53

• 2Exactly what I was looking for. With One Dark Pro it's super difficult to see the current tab – trallnag CommentedOct 21, 2021 at 15:09

• 1Use "Preferences: Open Settings (JSON)" from the command palette to open your settings.json file. On my machine it was in ~/Library/Application Support/Code/User/settings.json – John J. Camilleri CommentedJan 21, 2022 at 7:31

• 11. for macOS user, cmd + shift + P to enable your command input, 2. then either start typing open settings for Preferences: Open Settings (JSON) or just paste this command workbench.action.openSettingsJson – seedme CommentedMar 19, 2022 at 1:41

Show 4 more comments69

You can also colorize background of tab:

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

ShareImprove this answerFollowedited Oct 18, 2023 at 2:12roapp74622 gold badges77 silver badges2020 bronze badgesanswered Jul 21, 2021 at 12:05Zvezdochka1,3381313 silver badges88 bronze badges

• Something with alpha seems to work the best; "tab.activeBackground": "#ffffff20" – Pithikos CommentedOct 12, 2022 at 10:38

• 1This answer is widely incomplete compared to @Amol's answer – jeancallisti CommentedApr 17, 2023 at 9:11

• please don't post answers to a different question here. If you want to answer a different question, do it in the right place. – starball CommentedMay 18, 2023 at 21:47

• There is not always the right place. I searched for background changing and got this. Kinda helpful. – Han CommentedNov 20, 2023 at 2:41

Add a comment64

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

ShareImprove this answerFollowedited Oct 17, 2023 at 18:55answered Feb 15, 2022 at 22:52Amol1,44011 gold badge1212 silver badges2727 bronze badges

• 3Best Answer! I personally like this setting: "tab.activeBorderTop": "#11ff008c", "tab.activeBackground": "#11ff001a", "tab.activeBorder": "#12ff00" It kind of gives anime feel :) – Mandeep Singh CommentedNov 3, 2022 at 11:58

• "1. Go to Settings"... psst... bottom left corner, the gear icon (or "Ctrl+Comma")... – Piotr Kepka CommentedFeb 1, 2024 at 12:22

Add a comment17

Many people have answered before but those are answers of people who know their way around VSCode; I've always found myself googling one or more steps of the most popular answer -- such as "open the settings", or "open the command palette".

Here is a DETAILED answer :

1. Open VScode

2. Open the "commands palette" ( shift+Ctrl+P )

3. Start typing "preference" in the search box. The autocomplete should offer "Preferences : Open user settings (JSON)".

1. Click on that choice. It opens a JSON file named "settings.json"

2. You need to understand the syntax of JSON files. But in essence you need to add a section named "workbench.colorCustomizations", containing two entries : "tab.activeBorderTop" and "tab.activeBackground"

1. set the color value to the desired value (in the screenshot, #FF0000 means red). activeBorderTop is for the thin colored bar at the top of the tab while activeBackground is for the whole tab's color.

2. Save the file (Ctrl+S) you should see the changes immediately.