# 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](https://stackoverflow.com/questions/tagged/visual-studio-code)

[Share](https://stackoverflow.com/q/59121072)[Improve this question](https://stackoverflow.com/posts/59121072/edit)Followasked Nov 30, 2019 at 23:04[![psygo's user avatar](https://www.gravatar.com/avatar/0e50f7e8bb3963d1dc749e278c3d8d33?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/4756173/psygo)[psygo](https://stackoverflow.com/users/4756173/psygo)7,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: [!\[settings options popup with all the options](https://i.sstatic.net/X5th0.png)]\([i.sstatic.net/X5th0.png](https://i.sstatic.net/X5th0.png)) Hovering over the options also shows the description: [i.sstatic.net/4GIzd.png](https://i.sstatic.net/4GIzd.png) – [Thomas Oatman](https://stackoverflow.com/users/8401646/thomas-oatman) [CommentedMar 7, 2022 at 19:38 ](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment134524707_59121072)
* great question. the fact that by default the active tabs are almost impossible to differentiate does my head in – [Richard Hunter](https://stackoverflow.com/users/5481807/richard-hunter) [CommentedApr 21, 2024 at 9:35](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment138148545_59121072)

[Add a comment](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at)

### 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

[![enter image description here](https://i.sstatic.net/TwcxQ.png)](https://i.sstatic.net/TwcxQ.png)

[Share](https://stackoverflow.com/a/64812532)[Improve this answer](https://stackoverflow.com/posts/64812532/edit)Follow[edited Jul 6, 2022 at 15:41](https://stackoverflow.com/posts/64812532/revisions)[![Mauricio Gracia Gutierrez's user avatar](https://i.sstatic.net/Xk6rm.jpg?s=64)](https://stackoverflow.com/users/1461862/mauricio-gracia-gutierrez)[Mauricio Gracia Gutierrez](https://stackoverflow.com/users/1461862/mauricio-gracia-gutierrez)10.9k77 gold badges7979 silver badges111111 bronze badgesanswered Nov 12, 2020 at 22:09[![tbo47's user avatar](https://i.sstatic.net/O0Owg.jpg?s=64)](https://stackoverflow.com/users/1554999/tbo47)[tbo47](https://stackoverflow.com/users/1554999/tbo47)3,32933 gold badges2222 silver badges1313 bronze badges

* 8adding "tab.activeBackground": "#26549e" is also helpful for highlighting the entire tab – [stu](https://stackoverflow.com/users/12386/stu) [CommentedMay 20, 2023 at 13:51](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment134541046_64812532)
* If you have N split panes, this only highlights one tab. Is there any way to highlight N instead? – [dshin](https://stackoverflow.com/users/543913/dshin) [CommentedSep 19, 2023 at 14:01](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment135981135_64812532)

[Add a comment](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at)Report this ad167

You can visit the [Theme Color VS Code web page](https://code.visualstudio.com/api/references/theme-color) to get more information on this.

> Open your user `settings.json` (<kbd>Ctrl</kbd> + <kbd>,</kbd>)

Two lines below the `tab.activeBorder`, you will find `tab.activeBorderTop`, which does exactly what you intended.

```json
"workbench.colorCustomizations": {       // Can customize each aspect
    "[One Dark Pro]": {                  // Optional
        "tab.activeBorderTop": "#0A84FF" // Active Tab Top Highlighting
    }
},
```

[Share](https://stackoverflow.com/a/59121073)[Improve this answer](https://stackoverflow.com/posts/59121073/edit)Follow[edited Nov 25, 2020 at 14:26](https://stackoverflow.com/posts/59121073/revisions)answered Nov 30, 2019 at 23:04[![psygo's user avatar](https://www.gravatar.com/avatar/0e50f7e8bb3963d1dc749e278c3d8d33?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/4756173/psygo)[psygo](https://stackoverflow.com/users/4756173/psygo)7,59377 gold badges6060 silver badges106106 bronze badges

* 3Where is this file located ? – user4987870 [CommentedJun 5, 2020 at 23:22](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment110051628_59121073)
* 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](https://stackoverflow.com/users/2190106/zvezdochka) [CommentedJul 21, 2021 at 11:53](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment121005538_59121073)
* 2Exactly what I was looking for. With One Dark Pro it's super difficult to see the current tab – [trallnag](https://stackoverflow.com/users/7391331/trallnag) [CommentedOct 21, 2021 at 15:09](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment123136996_59121073)
* 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](https://stackoverflow.com/users/98600/john-j-camilleri) [CommentedJan 21, 2022 at 7:31](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment125159675_59121073)
* 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](https://stackoverflow.com/users/3107052/seedme) [CommentedMar 19, 2022 at 1:41 ](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment126432254_59121073)

[Show 4 more comments](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at)69

You can also colorize background of tab:

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

[Share](https://stackoverflow.com/a/68469182)[Improve this answer](https://stackoverflow.com/posts/68469182/edit)Follow[edited Oct 18, 2023 at 2:12](https://stackoverflow.com/posts/68469182/revisions)[![roapp's user avatar](https://i.sstatic.net/1YCUXf3L.png?s=64)](https://stackoverflow.com/users/11153441/roapp)[roapp](https://stackoverflow.com/users/11153441/roapp)74622 gold badges77 silver badges2020 bronze badgesanswered Jul 21, 2021 at 12:05[![Zvezdochka's user avatar](https://i.sstatic.net/mZ87o.jpg?s=64)](https://stackoverflow.com/users/2190106/zvezdochka)[Zvezdochka](https://stackoverflow.com/users/2190106/zvezdochka)1,3381313 silver badges88 bronze badges

* Something with alpha seems to work the best; `"tab.activeBackground": "#ffffff20"` – [Pithikos](https://stackoverflow.com/users/474563/pithikos) [CommentedOct 12, 2022 at 10:38](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment130730333_68469182)
* 1This answer is widely incomplete compared to @Amol's answer – [jeancallisti](https://stackoverflow.com/users/9359785/jeancallisti) [CommentedApr 17, 2023 at 9:11](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment134096741_68469182)
* 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](https://stackoverflow.com/users/11107541/starball) [CommentedMay 18, 2023 at 21:47](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment134522944_68469182)
* There is not always the right place. I searched for background changing and got this. Kinda helpful. – [Han](https://stackoverflow.com/users/1776916/han) [CommentedNov 20, 2023 at 2:41](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment136651876_68469182)

[Add a comment](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at)64

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](https://i.sstatic.net/rDg1P.png)](https://i.sstatic.net/rDg1P.png)
4. Now add JSON values such as

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

   ```

[Share](https://stackoverflow.com/a/71134411)[Improve this answer](https://stackoverflow.com/posts/71134411/edit)Follow[edited Oct 17, 2023 at 18:55](https://stackoverflow.com/posts/71134411/revisions)answered Feb 15, 2022 at 22:52[![Amol's user avatar](https://www.gravatar.com/avatar/daf5cbc92ee7d467ed5d9f26bd2a6a78?s=64\&d=identicon\&r=PG)](https://stackoverflow.com/users/555129/amol)[Amol](https://stackoverflow.com/users/555129/amol)1,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](https://stackoverflow.com/users/3820989/mandeep-singh) [CommentedNov 3, 2022 at 11:58 ](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment131178288_71134411)
* "1. Go to Settings"... psst... bottom left corner, the gear icon (or "Ctrl+Comma")... – [Piotr Kepka](https://stackoverflow.com/users/2822977/piotr-kepka) [CommentedFeb 1, 2024 at 12:22](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at#comment137369419_71134411)

[Add a comment](https://stackoverflow.com/questions/59121072/is-there-a-way-of-making-the-active-tab-border-highlighted-on-top-instead-of-at)17

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)"**.

[![enter image description here](https://i.sstatic.net/ARLug.png)](https://i.sstatic.net/ARLug.png)

5. Click on that choice. It opens a JSON file named **"settings.json"**
6. 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"**

[![enter image description here](https://i.sstatic.net/OD8Wa.png)](https://i.sstatic.net/OD8Wa.png)

7. 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.
8. Save the file **(Ctrl+S)** you should see the changes immediately.
