70

Is there a way to change the Title Bar color for Visual Studio Code (v1.26.0)?

9 Answers 9

130
  1. Menu FilePreferencesSettings

  2. Look for "window.titleBarStyle": "native", copy it to your user settings, and change it to "window.titleBarStyle": "custom". It will adapt your theme now.

  3. If the current color is not what you want or you want to tweak it, try doing this.

  4. In your user settings, add the following.

    "workbench.colorCustomizations": {
        "[Name of the Current Theme you are using]": {
            "titleBar.activeBackground": "#191919cc",
            "titleBar.activeForeground":"#ffffff",
        },
    },
    "window.titleBarStyle": "custom"
    
8
  • I think, we also need to add the following: { "window.titleBarStyle": "custom" } Aug 14, 2018 at 5:19
  • what about the background color and foreground of the menus that popup when you hover over file, edit, selection, etc...? Aug 14, 2018 at 20:20
  • 1
    nevermind, I found them all in here code.visualstudio.com/docs/getstarted/theme-color-reference Aug 14, 2018 at 20:28
  • 5
    This doesn't seem to work anymore in VScode 1.30. I can't style the titlebar anymore. I used the Theme colors for the titlebar and menu in 1.29. Any suggestions? Dec 17, 2018 at 21:43
  • 1
    This is no longer correct. The other answer is correct
    – Andy Ray
    Feb 5, 2019 at 22:19
58

cmd palette

Open menu FilePreferencesSettings and add the following setting:

"workbench.colorCustomizations": {
  "titleBar.activeBackground": "#553955" // Change this color!
},
"window.titleBarStyle": "custom"

Result

From the following source:

Colorful Visual Studio Code titlebars for better productivity

1
  • 3
    This didn't work for me until I set "window.titleBarStyle": "custom" in the global user settings (I'm running Fedora 32 + KDE)
    – jozxyqk
    Feb 19, 2021 at 22:10
34

There is now a handy Visual Studio Code marketplace plugin called Window Colors which automatically colors the activitybar and titlebar of every window uniquely.

Enter image description here

Just go to extensions and type: window colors

For more information, see the Visual Studio Code marketplace webpage.

Edit (Sept 2020): Just noticed that on Ubuntu 20.04 I had to set the preferences->titlebar setting from native to custom in the VSCode Preferences. Otherwise the titlebar does not change colors. Also see this issue on github here- the input from @musicfuel solved it for me.

enter image description here

2
  • 7
    Just wanted to add that how the color is chosen: ..."gives each new VS Code window a unique color based on a hash of the root directory name when it is opened..."
    – klaas
    May 21, 2019 at 14:42
  • Sadly it doesn't color the task bar icon. Aug 30, 2022 at 7:17
13

John Papa launched Peacock a few months back. I've been using the same since then.

It's an easy-to-use plugin with a great set of commands to work with.

It is highly customize-able.

Also it has emphasis on BrandColors which comes in handy when you're simultaneously working on several different projects involving different frameworks and libraries.

1
  • 1
    Exactly what I was looking for. I use it for coloring my Remote SSH windows to red (production server) to avoid accidental modifications in production code. I moved the plugin generated color settings from the project's .vscode/settings.json to /home/myuser/.vscode-server/data/Machine/settings.json to make it default on that server (for any projects).
    – szegheo
    Jan 14, 2021 at 13:09
8

In case somebody is still interested. I am using Color Stamp plug

For further tweaks, I changed the following parameters in my vscode project settings

.vscode\settings.json

    "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#7C21D7",
    "titleBar.border": "#ebe8e8",
    "titleBar.inactiveBackground": "#7c21d77c",
    "titleBar.activeForeground": "#ebe8e8",
    "statusBar.background": "#7C21D7",
    "statusBar.debuggingBackground": "#7C21D7",
    "statusBar.noFolderBackground": "#7C21D7",
    "statussBar.prominentBackground": "#7C21D7",
    "statusBar.foreground": "#ebe8e8"
}
8

Please apply these simple steps.

  1. Menu FilePreferencesSettings

  2. Look for "window.titleBarStyle": "native", and change it to "window.titleBarStyle": "custom". It will adapt your theme now.

  3. If the current color is not what you want or you want to tweak it, try doing this.

  4. In your user settings, add the following.

     "workbench.colorCustomizations": {
             "titleBar.activeBackground": "#191919cc",
             "titleBar.activeForeground":"#ffffff",
     },
    
5

Note that VSCode 1.45 (April 2020) will offer additional settings:

New theme colors for editor tabs

Some new colors where added to further theme workbench editor tabs:

  • tab.unfocusedInactiveBackground: Inactive tab background color in an unfocused group
  • tab.hoverForeground: Tab foreground color when hovering
  • tab.unfocusedHoverForeground: Tab foreground color in an unfocused group when hovering

New theme color for editor title border

The existing color editorGroupHeader.tabsBorder changed to render a border below tabs but above breadcrumbs.

A new color editorGroupHeader.border allows to render a border below the editor group header (i.e. below breadcrumbs if enabled) to restore the previous behaviour of editorGroupHeader.tabsBorder.

3

I've created a simple Visual Studio Code plugin which accepts a list of regular expressions and colors and changes the titleBar based on them. It's great for working on mono repositories or large projects with multiple packages (like Lerna, or React + React Native)

ColorTabs

1

Changing the theme of Visual Studio Code will change the title bar color.

Menu File → Preferences → Color theme

Then switch to a different color theme, this will change the title color.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.