DEV Community

Cover image for Customize titleBar in VS Code
Ismael López
Ismael López

Posted on • Updated on

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"
    } 
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
mauryarohit profile image
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

Collapse
 
itsjzt profile image
Saurabh Sharma

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

Collapse
 
ismaellopezdev profile image
Ismael López

Great, good that it served you

Collapse
 
ismaellopezdev profile image
Ismael López

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