Way to disable the Visual Studio Code editor title bar

Question

When not using tabs in Visual Studio Code, it still shows a bar with the name of the currently open file.

Editor title bar

Is there a way to disable this bar completely?

Answer 1

You can use this setting to hide the title bar: "window.titleBarStyle": "custom". It can be accessed via menu File → Preferences → Settings → Window → Title Bar Style and set it to custom.

Answer 2

I tried all the aforementioned tips, without success in hiding the window titlebar.

However, I did find a solution, here: https://github.com/microsoft/vscode/issues/174903#issuecomment-1762118744

(and the reply from ryanberckmans above in that thread)

It involves using the apc customize++ plugin to vs code and adding settings to control it, to your user settings.json.

The thread has atleast two different settings proposals, for me, the one I linked to worked (he links to his settings file at the end of his reply).

So:

1. Install vs code extension Apc Customize UI++
2. Add this to your user settings.json file:

  // ================================================================================
  // APC - UI Customizer
  // ================================================================================
  "window.titleBarStyle": "native",
  "apc.menubar.compact": true,
  "apc.electron": {
    "frame": false,
    "titleBarStyle": "hidden"
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 40,
    "itemSize": 40,
    "itemMargin": 0
  },
  "apc.stylesheet": {
    ".title-label": "display: none !important",
    ".composite.title": "display: block !important",
    ".monaco-workbench .part.sidebar .title-actions .actions-container": "justify-content: space-evenly !important"
  }

I also have tabs and menubar hidden. This poses a problem, because I cannot invoke the menubar at all (i e, alt-f does not work). So, that is a consideration, you are limited to ctrl-shift-p.

Hope this helps someone! BR! /mawi

Answer 3

Install the custom CSS extension.

Now in your custom stylesheet:

.container > .title {
  display: none !important;
}

After, run the command "Enable custom css / js" (and restart).

Answer 4

I faced this issue today, so according to the screenshot you attached it looks like file path is showing with a title bar. So to hide this completely, you can remove this property called "workbench.editor.showTabs" if it's value is false from settings.json file situated in /Users/(user_name)/Library/Application Support/Code/User/settings.json

Answer 5

I played around with suggested options from VSCode and found this to work

make sure that you have your Window Title Bar Style set to custom open the settings.json file located in /Users/{your-username}/Library/Applcation\ Support/Code/User/settings.json

Append the following to the JSON object

"editor.titleBar.enabled": false

Another option could be to try setting this option in the settings file

  "workbench.colorCustomizations": {
    "titleBar.forground": "#00000000",
    "titleBar.activeForeground": "#00000000",
    "titleBar.background": "#00000000",
    "titleBar.activeBackground": "#00000000",
    ...

This is my machine settings

here's a comprehensive list of options you can use to tweak the current the or even your own theme. no additional 3rd party extensions are needed, just tine in the saddle!

happy coding =)

Answer 6

File → Preferences → Settings → Window → Title Bar Style Now choose custom title bar.