-1

concept image

This image I created using the dev tools to illustrate what I would like to achieve. Notice there is no top bar at all. I use a tiling window manager so this works well for me, and I would really prefer to save the space.

However, there is no good way to target the html that needs to be targeted to achieve this using a custom CSS file. I couldn't find anything on this topic other than the customize-ui plugin, which appears to have died recently. Can this be done? If so, how?

starball
  • 20,030
  • 7
  • 43
  • 238
blam
  • 9
  • 4

1 Answers1

0

I'm not sure if this is possible.

Particularly adding custom CSS to VS Code via an extension. From the documentation, it seems like it might not be. https://code.visualstudio.com/api/extension-capabilities/overview says:

However, we also impose restrictions upon extensions to ensure the stability and performance of VS Code. For example, extensions cannot access the DOM of VS Code UI.

You could, however, take an approach similar to the vscode-custom-css extension and literally modify the installed VS Code files.

If you do that, then the next step is:

If the window.titleBarStyle setting is set to "custom", then you can look into messing around with the CSS/HTML for the HTML element with id workbench.parts.titlebar. For example, adding CSS like

#workbench\.parts\.titlebar {
  display: none;
}

I'm not sure if it's possible for an extension to change the window.titleBarStyle setting, but you can look into this part of the VS Code API docs: https://code.visualstudio.com/api/references/vscode-api#WorkspaceConfiguration (see also the workspace.getConfiguration method).

starball
  • 20,030
  • 7
  • 43
  • 238
  • This CSS snippet did not work for me. I tried for hours and could not find a way to target the HTML I needed. There are a few blocks that need their height set to 0 and other block that needs the top set to 0. I am unable to target these blocks because there is no IDs or unique class names nearby – blam Feb 21 '23 at 23:49