CODEWITHSUNDEEP
visual-studio-code
fredlahde
fredlahde

Reputation: 841

Way to disable the Visual Studio Code editor title bar

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?

Upvotes: 74

Views: 74620

Answers (6)

Marcus Widerberg
Marcus Widerberg

Reputation: 163

Update: This no longer works.

The APC Customize UI++ extension no longer works, as of VS Code version 1.94 (sept 2024). The reason apparently (comment) has to do with VS Code moving to ESM modules (rls notes). So this approach is currently not working, IF and until it can be fixed...

Issue and discussion on the APC extension here: drcika/apc-extension#230

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

Upvotes: 6

undefined
undefined

Reputation: 2501

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

enter image description here enter image description here

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 =)

Upvotes: 3

sankar
sankar

Reputation: 37

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

Upvotes: -2

Puspam
Puspam

Reputation: 2787

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.

Upvotes: 175

Sahil Satija
Sahil Satija

Reputation: 31

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

Upvotes: 3

Robin Drost
Robin Drost

Reputation: 507

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).

Upvotes: 4

Related Questions