Hide top bar in visual studio code (zen mode)

Question

I have hidden tabs already and disabled some things like line numbers etc. How to get rid of top bar which contains file name ProfilePrivate.tsx?

Answer 1

This is what one can do to improve ZEN mode.

(At the end there is still a region at the top which will lap over the code when scrolling. It is unfortunately not possible (at least for me) to fix it with CSS, because the height of the editor gets dynamically calculated with JavaScript. Probably this can be done with an extension like Monkey Patch, but I did not test it.)

First, choose from these standard settings, to be put into the settings.json. Some settings require a restart, e.g. the editor.scrollbar settings. Some settings also affect the display when not in ZEN mode.

{
    "breadcrumbs.enabled": false,
    "editor.codeLens": false,
    "editor.folding": false,
    "editor.foldingHighlight": false,
    "editor.highlightActiveIndentGuide": false,
    "editor.lineNumbers": "off",
    "editor.matchBrackets": "never",
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "editor.minimap.showSlider": "always",
    "editor.occurrencesHighlight": false,
    "editor.overviewRulerBorder": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "editor.rulers": [],
    "editor.scrollbar.horizontal": "hidden",
    "editor.scrollbar.vertical": "hidden",
    "editor.smoothScrolling": true,
    "editor.selectionHighlight": false,
    "scm.diffDecorations": "none",
    "window.title": "${activeEditorLong} ${dirty}",
    "window.titleSeparator": " – ",
    "window.zoomLevel": 1.3,
    "workbench.colorCustomizations": {
        // see https://code.visualstudio.com/api/references/theme-color
    },
    "workbench.editor.showTabs": false,
    "zenMode.centerLayout": true,
    "zenMode.fullScreen": true,
    "zenMode.hideLineNumbers": true,
    "zenMode.hideStatusBar": true,
    "zenMode.hideTabs": true,
    "zenMode.restore": false,
}

I found these settings in these answers: Xixixao's answer, 1, 2, 3, 4, 5, 6, 7, 8.

If that is not enough, append the following CSS rules to the workbench.desktop.main.css. This file is usually located in C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench. If it is not, use Help → Toggle Developer Tools to figure out where it resides, or search system wide for it.

After a restart, VSCode will give a warning that your installation is "corrupt". That's ok. Choose "don't show message again". Alternatively, you may also try doing it with an add-on like Customize UI. I did not test that.

.fullscreen .decorationsOverviewRuler {
    display:none !important;
}

.fullscreen .invisible.scrollbar.vertical {
    display:none !important;
}

/* You dont need this if you have "zenMode.centerLayout": false, */
.fullscreen .monaco-split-view2.separator-border>.monaco-scrollable-element>.split-view-container>.split-view-view:not(:first-child):before {
    background:transparent !important;
}

/* Do not use these if you have "zenMode.hideTabs": false, */
.fullscreen .title.show-file-icons {
    display: none !important;
}
.fullscreen .editor-container {
    margin-top:34px !important;
}
.fullscreen .scroll-decoration {
    display:none !important;
}

I found these tweaks by inspecting the source using Help → Toggle Developer Tools.

Screenshot before/after:

Answer 2

I've found a solution.

https://github.com/Microsoft/vscode/issues/33607#issuecomment-424193133

1. Install Custom CSS & JS vscode plugin
2. Create file /Users/(yourusername)/.vscode.css and paste there: .title.show-file-icons { display: none !important; }
3. Change vscode settings adding: "vscode_custom_css.imports": ["file:///Users/(yourusername)/.vscode.css"]
4. Press CMD + Shift + P and write Enable custom css and js
5. Restart vscode

It should hide top bar.

Answer 3

Hide the top bar using a command from command palette:

Install: multi-command, Settings Cycler, Customize UI extensions.

Add this to your settings.json:

  "zenMode.restore": true,
  "multiCommand.commands": [
    {
        "command": "toggleUltraZen",
        "sequence": [
            "workbench.action.toggleZenMode",
            "settings.cycle.ultraZen",
            "workbench.action.reloadWindow",
        ]
    },
  ],
  "settings.cycle": [{
    "id": "ultraZen",
    "overrideWorkspaceSettings": false,
    "values": [
      {
        "customizeUI.stylesheet": {}
      },
      {
        "customizeUI.stylesheet": {
          ".title.show-file-icons": "display: none !important;",
        },
      }
    ]
  }
],

To use this, from command palette:

1. Multi command: Execute multi command
   • choose toggleUltraZen and hit Enter

Note that the first command will reload the window.

I also use (for coding):

  "zenMode.fullScreen": false,
  "zenMode.centerLayout": false,
  "zenMode.hideLineNumbers": false,
  "zenMode.hideStatusBar": false,

which you might pick and choose based on your needs (they are accessible from the Settings UI).