# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://learnimportant.gitbook.io/learn-important/windows10/vscode-settings/change-active-tab-color-vscode-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.