Option to completely hide top bar.

[HolbyFPV]

Currently there is the option to set the title bar at the very top to native or custom. I would love to see a 3rd option, completely hidden. Those of use who run tiling window managers would really appreciate the extra space savings of being able to disable the bar.

Here is a concept image. I removed the topbar using the inspector/dev tools. There is no good way to target the HTML and do this through a custom CSS file sadly. Hopefully a native option can be added.

[sbatten]

I am not sure how native is not solving for your use case? It would be up to the tiling window manager to not show the native title bar, yes?

[HolbyFPV]

So I couldn't find this feature in any of the window managers. I use Windows 11. I run the majority of my applications without the title bar. Each application has it's own setting to turn off the title bar. For reference, I use GlazeWM, but I've checked around for this feature and no one seems to have a way to disable bars system wide.
https://github.com/lars-berger/GlazeWM

I tried to accomplish this myself using the WinAPI and had some minor success. https://learn.microsoft.com/en-us/windows/win32/winmsg/window-styles While this approach was breaking for most the programs I tried, it somewhat worked for VSCode. It wasn't perfect, and I'm not sure I can really go further with this. I can understand why none of the window managers offer this feature. At least on windows, I believe removing title bars needs to be done individually for each program. I would love to see this feature make it's way into VSCode.

[HolbyFPV]

I added this feature to GlazeWM.

https://github.com/lars-berger/GlazeWM/pull/266/files

Removing the window style doesn't completely get rid of the bar. There is always this piece at the top, about 10px tall, that remains even when the bar is hidden. I asked around and everyone I talked to says there isn't anything further I can do. As far as I know, the only way to get rid of the bar completely is if the VSCode has built in support to hide the bar with something like "window.titleBarStyle": "hidden"

[HolbyFPV]

This project is much bigger than anything I've worked on, so I wanted to ask before I put in the effort. If I add an option for "window.titleBarStyle": "hidden" and made a PR, would the team be open to merge this? I wouldn't bother doing this unless I can send it upstream, I have no interest in maintaining a fork. @sbatten

[ryanberckmans]

A lot of people used the now-broken Customize UI plugin just to remove the title bar. We find it spammy because you spend thousands of hours in VSCode and it's wasted vertical space. I'm stuck on VSCode 1.73 because there's no way to hide the title bar in 1.74+.

[goyalyashpal]

@ryanberckmans show ur voice by thumbs upping on the issue

[vscodenpa]

Hey @sbatten, this issue might need further attention.

@notblam, you can help us out by closing this issue if the problem no longer exists, or adding more information.

[HolbyFPV]

If I set "window.titleBarStyle": "native" then write special code to remove the title bar through the windows API, I can somewhat get it to work. But it leaves this ugly bar at the top. This is a limitation of Windows sadly. I'm still advocating that a none option should be added. Many other programs do this.

[ryanberckmans]

SOLVED

Happy to report that there is now a working solution to completely hide the top bar in latest VS Code.

I am again using latest vsc with automatic updates enabled and top bar completely hidden.

Here is what worked for me

1. install extension Apc Customize UI++

2. add these lines to your user settings.json:

   // BEGIN -- settings to hide top menu bar, based on https://github.com/drcika/apc-extension/issues/52#issuecomment-1675837688
   "window.titleBarStyle": "native",
   "apc.electron": {
       "titleBarStyle": "customButtonsOnHover",
   },
   "apc.header": {
       "height": 37
   },
   "apc.sidebar.titlebar": {
       "height": 37
   },
   "apc.activityBar": {
       "size": 77,
       "itemSize": 48,
       "itemMargin": 0
   },
   "apc.stylesheet": {
       ".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;", // Don't indent the sidebar title. We want it horizontally aligned to the left so that it makes a nice vertical column with the controls in the sidebar.
       ".custom-sidebar-titlebar .sidebar .composite.title .inline-titlebar-placeholder": "padding-left: 0 !important;", // Don't indent the sidebar title. Part 2 to remove the empty space to the left of the sidebar title and complete the proper horizontal left alignment.
       ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;", // Don't indent the statusbar items. This horizontally aligns the statusbar items with the "Problems" header in the panel, which looks nice.
   },
   // END -- settings to hide top menu bar and other stylesheet polish

3. that's it. Your top bar is now hidden. Also, the traffic light close/minimize/maximize icons are hidden unless you mouse over them.

Screenshot of top-left of vsc:

Hover to show traffic light:

[twome]

This is my whole window now! Thanks for letting me know about Apc Customize UI++ @ryanberckmans ! Unfortunately on Windows, I can't find an easy way to get rid of the useless space remaining at the bottom of the window due to VSCode setting top style properties on the various components, a hard-coded expectation of the title bar being present. Seems like it'd be pretty simple to do that with some custom JS inside Apc.

[HolbyFPV]

Apc Customize UI++ is working great for me on Windows.

Here are my .dots.

[jaen]

This extensions says it needs write access to VSCode's installation directory, which doesn't work for me – would still be good for VSCode to provide this option itself. The native option also doesn't work for me, because it's broken on Wayland (https://github.com/microsoft/vscode/issues/184124).

[chipbite]

@HolbyFPV - your settings worked for me as well. ( https://github.com/microsoft/vscode/issues/174903#issuecomment-1762118744 )

I did not get the settings that @ryanberckmans posted to work, oddly. But no matter, great thread, solved it!

The only problem I find here, is that there is no way, apparently, to activate the menus... ie:

I would like to hide the titlebar and menubar, but still be able to dropdown the menubar, typically "alt-f" for filemenu....

Any tips for that?

[ghost]

Apc Customize UI++ is working great for me on Windows. Here are my .dots.

@HolbyFPV How do you move vscode with these settings?

[chipbite]

I assume most with these settings move the editor window using the keyboard. Depends on os/window manager. For instance, for windows use win+arrow keys to move size window to left right half and toa a quarter at the bottom or top. And to move between virtual desktops use the virtual desktop view/switcher win+tab.

On Fri, Nov 3, 2023 at 2:48 PM Harry Philips @.***> wrote:

Apc Customize UI++ is working great for me on Windows. Here are my .dots https://github.com/HolbyFPV/.dotfiles/blob/main/mirrors/vscode/settings.json .

@HolbyFPV https://github.com/HolbyFPV How do you move vscode with these settings?

— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode/issues/174903#issuecomment-1792469395, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEIQX5WJDDOAJIVEU2GID3YCTY2DAVCNFSM6AAAAAAVC3436CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJSGQ3DSMZZGU . You are receiving this because you commented.Message ID: @.***>

[ghost]

But with the title bar gone, you can't drag your vscode across the window, right?

[hgaiser]

But with the title bar gone, you can't drag your vscode across the window, right?

I think he means he uses keyboard shortcuts to move the window. Like <Super>+<Left> to move the window to the left half. You can also always use the <Super> key and drag anywhere on a window to move it (I think this works on Windows too).

[ghost]

But with the title bar gone, you can't drag your vscode across the window, right?

I think he means he uses keyboard shortcuts to move the window. Like <Super>+<Left> to move the window to the left half. You can also always use the <Super> key and drag anywhere on a window to move it (I think this works on Windows too).

I meant to drag vscode around the window with mouse. Not the fixed places.

It's likely that with Apc customize ui++, if we make an inline title bar (menu bar removed) on Windows, we can't drag with the title bar.

[hgaiser]

Like I said, you can drag a window around by holding the <Super> key and dragging anywhere on the window (not necessarily the title / menu bar).

[ghost]

Nope, I can't do it in Windows OS.

[hgaiser]

Ah, apologies, this indeed doesn't seem to be a Windows thing. I assumed it was.. there seem to be applications that you can install that implement that behavior, but not something out of the box..

[chipbite]

Yeah, moving windows by dragging is almost never part of my workflow, so that does not bother me.

However, the fact that I cant access the menubar at all when I am running the window titlebar-less is more of an issue for me. I am left to the command palette, which works but ofc does not offer the same things as the menubar.

[ghost]

I can't access the menubar when I run the window title bar-less, which is more of an issue for me.

@chipbite You can use the compact menubar setting.

"apc.menubar.compact": true,

[HolbyFPV]

Apc Customize UI++ is working great for me on Windows. Here are my .dots.

@HolbyFPV How do you move vscode with these settings?

I prefer letting a tiling window manager handle this.

On Linux there are well known options like i3/bspwm.

On Windows I am using GlazeWM.

[mawid6]

I can't access the menubar when I run the window title bar-less, which is more of an issue for me.

@chipbite You can use the compact menubar setting.

"apc.menubar.compact": true,

Yeah, I have that setting - does not have any effect on the visibility of the menubar, for my situation, it seems...

[mawid6]

I want to add that even though there is a workaround, it is a bit difficult to set up - not something for novice users - and it is rather cludgy - see the menubar issue, for example - and there are a few other issues (like a recent update gave me headaches, and I needed to reconfigure this a bit to make it work again, oddly). Thus:

It would have been alot better if vscode offered this out of the box!

Other applications and editors do have this, and I think it is really nice.

( That said, for advanced users, this does work. )

[mawid6]

Updated vs code v 1.82.6 today, and for some reason the window titlebar was not hidden but still present. This was using the configuration above unchanged - that previously did the trick. (Update: Still applies for Feb / 1.87, so I think this is what goes from now)

I found that I now need to add: "window.customTitleBarVisibility": "never", (which I did not have in there previously) - with this setting it worked again as before. Not sure if this is just me or anyone else. Incidentally, this setting does not require reload (atleast w 1.87), but instead, the change is immediate. I have not regress-tested all other settings to see if any can now be skipped to achieve the same result, I just see that now this works.)

My current configuration for this, working as of today:

    // BASIC VIEW SETTINGS
    "window.commandCenter": false,
    "workbench.editor.showTabs": "none",
    "window.menuBarVisibility": "toggle",
    /* ==========================================================================================================
       BEGIN -- SETTINGS TO HIDE TITLEBAR, based on https://github.com/microsoft/vscode/issues/174903#issuecomment-1762118744
       Based on code here: https://github.com/HolbyFPV/.dotfiles/blob/main/mirrors/vscode/settings.json#L468
       For this to work, the apc+ extension must be installed - and enabled (do ctrl-shift-p "Enable APC extension")

       When VS code is updated, the Apc extension most often needs to be re-enabled again - using command mentioned above.
       It happens often that there is a permissions issue. Run vs code as admin once to fix.       
       Issue for that: https://github.com/drcika/apc-extension/issues/142

       ==========================================================================================================
    */ 
    "window.titleBarStyle": "native",
    "window.customTitleBarVisibility": "never",  // new 2024-02-28
    // "apc.font.family": "JetBrainsMono Nerd Font Mono",
    "apc.menubar.compact": false,
    // WAS: "apc.menubar.compact": true,
    // TO enable MENUBAR, set frame to true (AND ensure titleBarStyle is e g customButtonsOnHover) 
    // ANY changes to apc settings that require a restart SHOULD cause vs code to prompt for a restart, immediately after saving the new value here (if apc is enabled)
    // if it does NOT prompt for a restart it is likely that apc has been disabled
    "apc.electron": {
      "frame": false,
      // was false
    //   "titleBarStyle": "hidden"
      "titleBarStyle": "hidden"
      // was hidden
    },
    "apc.header": {
      "height": 37
    },
    "apc.sidebar.titlebar": {
      "height": 37
    },
    "apc.activityBar": {
      "size": 40,
      "itemSize": 40,
      "itemMargin": 0
    },
    /* =======================================================================================================
    (END) SETTINGS TO HIDE WINDOW TITLEBAR ====
    ==========================================================================================================

[TheElegantCoding]

@mawid6 i have 1.87.0 last version and that option dont work for me

[chipbite]

@TheElegantCoding I have now also received v. 1.87, and this still applies for me. In fact, the setting is immediate, unlike the apc settings which require reload. Not sure what you may be doing differently. Good luck.

[lopugit]

"apc.electron": { "frame": false, // was false // "titleBarStyle": "hidden" "titleBarStyle": "hidden" // was hidden },

what are those apc.electron settings my guy? 👀

[TheElegantCoding]

@lopugit There is a vscode extension called Apc Customize UI++, this extension allow you to modify some things that by default with vanilla vscode you cant, as the extension say

This extension allows customization outside vscode scoop. - Apc Customize UI++

[tim-hilt]

I'm on MacOS and the following hides the titlebar in fullscreen for me:

  "window.customTitleBarVisibility": "never",
  "window.titleBarStyle": "native"

no extension needed.

[Lindenk]

With the above setting the electron menu bar still pops up seemingly at random with no way to toggle it back off. This was never completed, is still an issue, and shouldn't have been closed

[mawid6]

@tim-hilt I'm on windows and for me that does not work for me, sadly.

Continuing the discussion:

For reference, here are the relevant settings and how the vs code window looks with them. Two conclusions first:

1. menuBarvisibility = hidden works - in all cases, and is not relevant, it can be disregarded.
2. customTitleBarVisibility = never does not work in any case on windows, except with the APC++ extension.

1. Left side: Gets the custom (not native) window titlebar. Does not hide titlebar, that setting does not work (see 2 above).
2. Middle. Gets native titlebar. Again: Does not hide titlebar, that setting does not work (see 2 above).
3. Right side. Using APC+ extension. Hides titlebar, works.

Con of 3 is of course that the settings (copy pasta) are like 15 lines...

[elias-michaias]

It would be really nice if this feature was simply offered out of the box... I have fought for a while using several solutions to no avail.

[chipbite]

@elias-michaias - running windows, the APC+ extension and settings work very well for me, very stable for the last few months atleast. But I totally agree, I think it should be possible out of the box.

[Ender-Wang]

For anyone who wants to make it work in a sec on macOS, here's how I did it:

1. Install Apc Customize UI++

2. C&P into settings.json

   // BEGIN -- settings to hide top title bar
   "apc.electron": {
     "titleBarStyle": "hidden",
   },
   "window.titleBarStyle": "native",
   "window.customTitleBarVisibility": "never",
   // END -- settings to hide top title bar
   
   // Customize the status bar background color
   "workbench.colorCustomizations": {
     "[Quiet Light]":{
       "statusBar.background": "#F5F5F5",
       "statusBar.foreground": "#B7B3CC",
       "statusBarItem.hoverBackground": "#F5F5F5",
       "statusBarItem.hoverForeground": "#6C5792",
     },
     "[One Dark Pro Darker]":{
       "statusBar.background": "#24272E",
       "statusBar.foreground": "#6A6D74",
       "statusBarItem.hoverBackground": "#24272E",
       "statusBarItem.hoverForeground": "#C4C4CC",
     },
   },

3. Here is my end result before(left) & after (right), btw, I am indeed using a custom theme, it does not affect that theme tho:

[elias-michaias]

For anyone who wants to make it work in a sec on macOS, here's how I did it:

1. Install Apc Customize UI++

2. C&P into settings.json

   // BEGIN -- settings to hide top title bar
   "apc.electron": {
    "titleBarStyle": "hidden",
   },
   "window.titleBarStyle": "native",
   "window.customTitleBarVisibility": "never",
   // END -- settings to hide top title bar
   
   // Customize the status bar background color
   "workbench.colorCustomizations": {
    "[Quiet Light]":{
      "statusBar.background": "#F5F5F5",
      "statusBar.foreground": "#B7B3CC",
      "statusBarItem.hoverBackground": "#F5F5F5",
      "statusBarItem.hoverForeground": "#6C5792",
    },
    "[One Dark Pro Darker]":{
      "statusBar.background": "#24272E",
      "statusBar.foreground": "#6A6D74",
      "statusBarItem.hoverBackground": "#24272E",
      "statusBarItem.hoverForeground": "#C4C4CC",
    },
   },

3. Here is my end result before(left) & after (right), btw, I am indeed using a custom theme, it does not affect that theme tho:

What version of MacOS are you on? This isn't working for me on Sonoma.

[Ender-Wang]

For anyone who wants to make it work in a sec on macOS, here's how I did it:

1. Install Apc Customize UI++

2. C&P into settings.json

   // BEGIN -- settings to hide top title bar
   "apc.electron": {
    "titleBarStyle": "hidden",
   },
   "window.titleBarStyle": "native",
   "window.customTitleBarVisibility": "never",
   // END -- settings to hide top title bar
   
   // Customize the status bar background color
   "workbench.colorCustomizations": {
    "[Quiet Light]":{
      "statusBar.background": "#F5F5F5",
      "statusBar.foreground": "#B7B3CC",
      "statusBarItem.hoverBackground": "#F5F5F5",
      "statusBarItem.hoverForeground": "#6C5792",
    },
    "[One Dark Pro Darker]":{
      "statusBar.background": "#24272E",
      "statusBar.foreground": "#6A6D74",
      "statusBarItem.hoverBackground": "#24272E",
      "statusBarItem.hoverForeground": "#C4C4CC",
    },
   },

3. Here is my end result before(left) & after (right), btw, I am indeed using a custom theme, it does not affect that theme tho:

What version of MacOS are you on? This isn't working for me on Sonoma.

macOS 14.5, vscode v1.90.2.

[meluiz]

Para quem quiser fazer funcionar em um segundo no macOS, veja como fiz:

1. Instale Apc Personalize UI++

2. C&P emsettings.json

   // BEGIN -- settings to hide top title bar
   "apc.electron": {
    "titleBarStyle": "hidden",
   },
   "window.titleBarStyle": "native",
   "window.customTitleBarVisibility": "never",
   // END -- settings to hide top title bar
   
   // Customize the status bar background color
   "workbench.colorCustomizations": {
    "[Quiet Light]":{
      "statusBar.background": "#F5F5F5",
      "statusBar.foreground": "#B7B3CC",
      "statusBarItem.hoverBackground": "#F5F5F5",
      "statusBarItem.hoverForeground": "#6C5792",
    },
    "[One Dark Pro Darker]":{
      "statusBar.background": "#24272E",
      "statusBar.foreground": "#6A6D74",
      "statusBarItem.hoverBackground": "#24272E",
      "statusBarItem.hoverForeground": "#C4C4CC",
    },
   },

3. Aqui está meu resultado final antes (esquerda) e depois (direita), aliás, estou realmente usando um tema personalizado, mas isso não afeta esse tema:

Em qual versão do MacOS você está? Isso não está funcionando para mim em Sonoma.

macOS 14.5, vscode v1.90.2.

Same for me me, but this isn't working.

[Ender-Wang]

Para quem quiser fazer funcionar em um segundo no macOS, veja como fiz:

1. Instale Apc Personalize UI++

2. C&P emsettings.json

   // BEGIN -- settings to hide top title bar
   "apc.electron": {
    "titleBarStyle": "hidden",
   },
   "window.titleBarStyle": "native",
   "window.customTitleBarVisibility": "never",
   // END -- settings to hide top title bar
   
   // Customize the status bar background color
   "workbench.colorCustomizations": {
    "[Quiet Light]":{
      "statusBar.background": "#F5F5F5",
      "statusBar.foreground": "#B7B3CC",
      "statusBarItem.hoverBackground": "#F5F5F5",
      "statusBarItem.hoverForeground": "#6C5792",
    },
    "[One Dark Pro Darker]":{
      "statusBar.background": "#24272E",
      "statusBar.foreground": "#6A6D74",
      "statusBarItem.hoverBackground": "#24272E",
      "statusBarItem.hoverForeground": "#C4C4CC",
    },
   },

3. Aqui está meu resultado final antes (esquerda) e depois (direita), aliás, estou realmente usando um tema personalizado, mas isso não afeta esse tema:

Em qual versão do MacOS você está? Isso não está funcionando para mim em Sonoma.

macOS 14.5, vscode v1.90.2.

Same for me me, but this isn't working.

That's interesting, must be sth else that prevents it from working.

[Ender-Wang]

Just found out that if yours is not working, have a look on this issue. Good luck.

[betomoedano]

This worked for me:

  "window.titleBarStyle": "native",
  "apc.electron": {
    "titleBarStyle": "customButtonsOnHover"
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 77,
    "itemSize": 48,
    "itemMargin": 0
  },
  "apc.stylesheet": {
    ".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;", // Don't indent the sidebar title. We want it horizontally aligned to the left so that it makes a nice vertical column with the controls in the sidebar.
    ".custom-sidebar-titlebar .sidebar .composite.title .inline-titlebar-placeholder": "padding-left: 0 !important;", // Don't indent the sidebar title. Part 2 to remove the empty space to the left of the sidebar title and complete the proper horizontal left alignment.
    ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;" // Don't indent the statusbar items. This horizontally aligns the statusbar items with the "Problems" header in the panel, which looks nice.
  },
  "window.customTitleBarVisibility": "never"

[meluiz]

This worked for me:

  "window.titleBarStyle": "native",
  "apc.electron": {
    "titleBarStyle": "customButtonsOnHover"
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 77,
    "itemSize": 48,
    "itemMargin": 0
  },
  "apc.stylesheet": {
    ".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;", // Don't indent the sidebar title. We want it horizontally aligned to the left so that it makes a nice vertical column with the controls in the sidebar.
    ".custom-sidebar-titlebar .sidebar .composite.title .inline-titlebar-placeholder": "padding-left: 0 !important;", // Don't indent the sidebar title. Part 2 to remove the empty space to the left of the sidebar title and complete the proper horizontal left alignment.
    ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;" // Don't indent the statusbar items. This horizontally aligns the statusbar items with the "Problems" header in the panel, which looks nice.
  },
  "window.customTitleBarVisibility": "never"

What is your VSCode version? I got this message:

If I change it using the UI settings, I get the default macOS title bar.

[pranav-js]

folks all we need to completely hide is two lines

"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never"

if you want it show on hover and all, look for previous comments

[meluiz]

folks all we need to completely hide is two lines

"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never"

if you want it show on hover and all, look for previous comments

Using a Mac M1, I attempted to use these two options. They are disabled and display a message indicating that this setting needs to be changed in the User's Settings (ui). When I make the changes, it ends up using the default title bar of macOS.

[darianmorat]

The only way...

• VSCode v1.91.1 (After this version is broken)
• Extension: Apc Customize UI++

And just using these two lines in settings.json :

   "apc.electron": { "frame": false },
   "window.titleBarStyle": "native"

[chipbite]

The only way...

• VSCode v1.91.1 (After this version is broken)

Odd, note that I am using 1.93 and my settings work for me - and have worked uninterrupted through many updates now. See my post above. Windows.

[darianmorat]

So @chipbite may I know a few things? Aside from the fact of using windows and apc customize:

• Vscode version.
• Settings.json applied (just the ones used to HIDE the titlebar).
• If possible a screenshot of your vscode so we can confirm that it actually works.

[chipbite]

So @chipbite may I know a few things?

Version, I just told you, I currently have the August release, so 1.93.1, to be exact. But again, my setup has worked through last releases.

Settings and screenshot, posted above, like I wrote. Please check my post a little further above in this comment section. 🙂