Change Visual Studio Code's title bar color
Visual Studio-CodeVscode SettingsVisual Studio-Code Problem Overview
Is there a way to change the Title Bar
color for Visual Studio Code (v1.26.0)?
Visual Studio-Code Solutions
Solution 1 - Visual Studio-Code
-
Menu File → Preferences → Settings
-
Look for
"window.titleBarStyle": "native"
, copy it to your user settings, and change it to"window.titleBarStyle": "custom"
. It will adapt your theme now. -
If the current color is not what you want or you want to tweak it, try doing this.
-
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"
Solution 2 - Visual Studio-Code
Open menu File → Preferences → Settings and add the following setting:
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#553955" // Change this color!
},
"window.titleBarStyle": "custom"
From the following source:
Colorful Visual Studio Code titlebars for better productivity
Solution 3 - Visual Studio-Code
There is now a handy Visual Studio Code marketplace plugin called Window Colors which automatically colors the activitybar and titlebar of every window uniquely.
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.
Solution 4 - Visual Studio-Code
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.
Solution 5 - Visual Studio-Code
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 hoveringtab.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
.
Solution 6 - Visual Studio-Code
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"
}
Solution 7 - Visual Studio-Code
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)
Solution 8 - Visual Studio-Code
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.