Title Bar should adapt to theme

[cenkt]

• VSCode Version: Code 1.13.1 (379d2efb5539b09112c793d3d9a413017d736f89, 2017-06-14T18:21:47.485Z)
• OS Version: Windows_NT ia32 10.0.15063
• Extensions:

Extension	Author	Version
jupyter	donjayamanne	1.1.3
python	donjayamanne	0.6.5
code-runner	formulahendry	0.6.24
beautify	HookyQR	1.1.1
Go	lukehoban	0.6.62
vscode-icons	robertohuertasm	7.10.1	;

---

Steps to Reproduce:

1.The title bar stays white even the theme is switched to dark 2.

[cenkt]

Just added a screen capture...

[jens1o]

Is that even possible on windows?

[elliott-parkinson]

Indeed it is, the fastest way might be to use a library like (or actually) the following: https://libraries.io/npm/electron-titlebar-windows

The titlebar could use the background and text colour of the editor background.

[elliott-parkinson]

The image below is an example of an expected look (achieved through accent colour on Window titles for the purposes of the screenshot).

[lawrencejob]

This is a great idea, and that mockup looks lovely. I wonder what it would mean for branding, though?

I'd love to highlight the icon issue too from discussion in #882 . It becomes much more pressing when the title bar changes for all users (so far it only get weird when people manually enable accent colours).

[elliott-parkinson]

I think this could be easily resolved by just removing the icon in the titlebar:

See the above example of the universal app for todoist. It doesn't actually need to be there at all, and it would create more space for filenames on smaller monitors.

[Hypnoes]

Infect, Electron provide APIs to create frameless window. Frameless Window. So we can draw our own title bar to modify it.

[Hammster]

@Hypnoes correct, adding the frameless option to /src/vs/code/electron-main/window.ts options variable does remove the title bar and border of windows. But this also means reimplementation of the titelbar. An example of this is https://github.com/zeit/hyper/pull/946

Things that need to implement are:

• Custom area for the title bar, which is draggable via -webkit-app-region: drag
• Icons for the window interactions, preferably customizable or predefined for the OS
• Border options, for the Windows 10 look and feel around the window
• Context menu reimplementation zeit/hyper as reference

I'm also pretty sure this removes the error where -webkit-app-region: drag does not work in development mode, due to the default behavior of titleBarStyle.

I would like to tackle the issue myself, but tbh I've got not enough time left for at least 2 months :P

[mjyocca]

For those who prefer windows and use vscode extensively, looking at a white title bar or a color that doesn't match your theme get's really annoying. Would love for this to be added.

[Astrantia]

Will this issue get any love anytime soon?

[guledali]

Agree with windows white titlebar and vscode don't match well together. Atom has a nice solution for this problem https://atom.io/packages/title-bar-replacer it would be nice if vs code team added this feature

[Ayplow]

This feature has been added in a recent pull request: #39972

Someone tell me if I'm doing this wrong :) I just really love how well this works

[pavittarx]

Well, the title bar in Windows/Linux can be customized to adapt to the theme, This is available as a preview feature in Version 1.25 (out now). Since, it is a preview feature it is not available by default, you need to enable it.

1. File > Preferences > Settings (Ctr+,)
2. Look for "window.titleBarStyle": "native", copy it to your user settings & change it to "window.titleBarStyle": "custom"
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 There you are using]": {
           "titleBar.activeBackground": "#191919cc",
           "titleBar.activeForeground":"#ffffff",
       },
   },

   Change the color values as per your requirement.

[noituri]

@pavittarx man... that was what I needed

[pedzed]

On macOS and most Linux distributions, the action buttons are on the left.

I would love to use the

"window.titleBarStyle": "custom"

setting, but it forces a Windows 10 look.

[guledali]

They have just recently added it to the backlog search for [Feature Request] Customizable Titlebar Buttons

[sbatten]

The intent is to make this the default behavior on Windows this milestone.

[pavittarx]

@yknomeh Thanks, I just tried to help the ones who started this thread or the ones who may come in searching here. 😃

---

@pedzed This feature was pending from a long time, while the problem was that title bars on Windows & Linux was unable to produce a dark title bar, when using a dark theme. I guess, you know that already. The feature has been implemented recently, but it is still better than what it used to be. 😆 I guess, you should look out for some other issue, or create a new one. The purpose of this one is served, finally title bar adapts to the theme,