Is there a way to change the Title Bar
color for Visual Studio Code (v1.26.0)?
9 Answers
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"
-
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
-
1nevermind, I found them all in here code.visualstudio.com/docs/getstarted/theme-color-reference Aug 14, 2018 at 20:28
-
5This 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
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
-
3This didn't work for me until I set
"window.titleBarStyle": "custom"
in the global user settings (I'm running Fedora 32 + KDE)– jozxyqkFeb 19, 2021 at 22:10
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.
-
7Just 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..."
– klaasMay 21, 2019 at 14:42 -
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.
-
1Exactly 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).– szegheoJan 14, 2021 at 13:09
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"
}
Please apply these simple steps.
Menu File → Preferences → Settings
Look for
"window.titleBarStyle": "native"
, 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": { "titleBar.activeBackground": "#191919cc", "titleBar.activeForeground":"#ffffff", },
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 grouptab.hoverForeground
: Tab foreground color when hoveringtab.unfocusedHoverForeground
: Tab foreground color in an unfocused group when hoveringNew 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 ofeditorGroupHeader.tabsBorder
.
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)
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.