Updated: May 23, 2025
Recommended scope: User Settings
1. What is it for?
Highlight at a glance the tab of the file you're editing when you have multiple tabs open.
2. Express Setup (3 Steps)
- Open the palette:
Ctrl + Shift + P
→ Preferences: Open Settings (JSON). - Glue this block in your
settings.json
(adjust the colors to your liking):
"workbench.colorCustomizations": { // If you only want it to affect the current theme, // wrap it like this: "[Default Dark+]": { ... } "tab.activeBackground": "#173d53", // Background of the active tab "tab.activeBorderTop": "#ffae00", // Very visible top line "tab.activeForeground": "#ffffff", // Text of the active tab "tab.activeModifiedBorder": "#ffae00", // Border if the file has unsaved changes "tab.inactiveBackground": "#1e1e1e", // Background of the rest of the tabs "tab.unfocusedActiveBorderTop": "#ffae00" // When the window loses focus }
3. Where do I put the settings?
Option | Archive | When to use it |
---|---|---|
User | /User/settings.json | To be applied to all your projects. |
Workspace | .vscode/settings.json | Only for open project. |
Default | Read only | It is not touched; it serves as a reference. |
4. Color key tokens
Token | Effect |
---|---|
tab.activeBackground | Background of the active tab |
tab.activeBorderTop | Upper edge (very visible) |
tab.activeBorder | Full edge |
tab.activeForeground | Text color of the active tab |
tab.activeModifiedBorder | Border when the file has unsaved changes |
tab.inactiveBackground | Inactive Tabs Background |
5. Useful extensions
- ColorTabs – Color tabs based on regular expressions (file type, path, etc.).
- Peacock – Color the window frame to distinguish workspaces or instances.
6. Good practices
- Begin with a border (
tab.activeBorderTop
) if you don't want to change the entire theme background. - Keep sufficient contrast between the chosen color and the general background of the editor.
- Documenta the change if you work as a team to avoid confusion.
7. Resources
- Official documentation: Theme Color Reference from VS Code.
- Topic examples: explore the repository
vscode-themes
to inspire you.
Done! With these steps, your active tab will stand out clearly and consistently.