VS Code customize sidebar

There are no user-defined stylesheets for vscode.

The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).

I created a feature request for this on the repo.

As mentioned in other answers there are extensions which allow injecting custom CSS, you should be careful using these as they directly manipulate the source code of VS Code which could lead to problems elsewhere and any modifications could break when you update.


I Found a way to change the font of Visual Studio Code Window.

  1. First, open command Pallete, and type "Toggle Developer Tools"
  2. This will open "Chrome Inspector".
  3. Select any text of sidebar of app.
  4. Search .monaco-shell class in "styles" tab at right side inspector ( Where show every styles of the current document ), then the font-family attribute.This is tab and stylesheets.
  5. In workbrench.main.css hit right click and click in "Open Soruce Panel" Show like this
  6. Format the css Code with this icon.
  7. ctrl+f for found font-family attribute again, 'cause the format redirect to end of css document, and get .monaco-shell class like this in ~6371 line.
  8. Change this font ( I have change to Droid sans Mono font ), but you change to you want.

Why i'm not change in the real document css

  1. 'Cause, when i changed the font family in the real document css ( C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbrench.main.css) generate a error saying "Vscode have a error, please reinstall the program" or similar

  2. When generate a actualization of application, the font family declareated will deleted, and the document css is´t a pretty code.

This process change every fonts of visual studio code application (not include the editor font )


I found it very effective to use the general zoom settings (it's somewhere in that huge settings window). This adjusts the zoom level of the entire app. Tweak it till you like the size of your explorer window, then adjust the settable editor font to be readable with that zoom level. I three parallel code windows of 80 columns plus the explorer on a good 17" laptop monitor, readable if you are OK with 8pt code font (which is actually 11 point font zoomed two notches down).


Although there is no direct way of customize the sidebar from settings as @Daniel Imms mentioned in his answer, but I found 2 plugins which helped to resolve this issue. You can either one of them if you want.

1. Custom CSS and JS Loader

In Custom CSS and JS Loader plugin, you need to create a custom css and then this plugin will inject that code directly in electron-browser/index.html(as VS Code is an electron based editor). I use this CSS in my Mac:

".explorer-viewlet .mac": "font-size: 1.2em !important",

2. CustomizeUI

CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:

"customizeUI.stylesheet": {
    ".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},

Tags:

Visual Studio Code

Recent Posts