Customize titleBar in VS Code

To open your user and workspace settings, use the following VS Code menu command:

• On Windows/Linux - File > Preferences > Settings
• On macOS - Code > Preferences > Settings

You can also open the Settings editor from the Command Palette (Ctrl+Shift+P) with Preferences: Open Settings or use the keyboard shortcut (Ctrl+,).

Go to "Appearance" and clic on Edit in settings.json". Add the next settings.

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#ff2c70",
        "titleBar.inactiveBackground": "#ff2c70cc",
        "titleBar.activeForeground": "#fff",
        "titleBar.inactiveForeground": "#fff000cc"
    } 
}

Thats all, you have customized your editor on VS Code.

Comments

[mauryarohit]

You can also change the title bar text. Open settings.json in vscode. Search for this line:

"window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${appName}",

and change the title to your liking.

Source: youtube.com/shorts/JDYitgCn6Kg

[Saurabh Sharma]

This thing is just awesome, you can use it to distinguish between sever and frontend folder

[Ismael López]

Great, good that it served you

[Ismael López]

If you want to do this task most faster you should try this extension marketplace.visualstudio.com/items...