Skip to content
Front page » TechNexus – Blog » Cheat Sheet – Highlight the active tab in VS Code

Cheat Sheet – Highlight the active tab in VS Code

vscode tab

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 + PPreferences: 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?

OptionArchiveWhen to use it
User/User/settings.jsonTo be applied to all your projects.
Workspace.vscode/settings.jsonOnly for open project.
DefaultRead onlyIt is not touched; it serves as a reference.

4. Color key tokens

TokenEffect
tab.activeBackgroundBackground of the active tab
tab.activeBorderTopUpper edge (very visible)
tab.activeBorderFull edge
tab.activeForegroundText color of the active tab
tab.activeModifiedBorderBorder when the file has unsaved changes
tab.inactiveBackgroundInactive 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.

en_USEnglish