> For the complete documentation index, see [llms.txt](https://learnimportant.gitbook.io/learn-important/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnimportant.gitbook.io/learn-important/windows10/vscode-settings/change-active-tab-color-vscode-ok.md).
# 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[](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
[](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)[](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[](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` (Ctrl + ,)
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[](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)[](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[](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 [](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[](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)"**.
[](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"**
[](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.