After trawling the Internet trying to find a suitable way to modify the VSCode explorer font, font sizes (not the editor font, if you are thinking about that!), I stumbled upon the “Toggle developer tools” option within vscode that provides access to what Stylesheets are being used to render the entire vscode interface.
Check out the image below.
As can be seen above (yes, I was learning ReactJS on Udemy – Checkout this course here, I wanted to increase the size of the explorer font, customize the font without having to adjust the window zoom settings. This can be done by editing the following file:
/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.cssSearch for the following classname and edit the font-size to change the font size. I have changed it to 15px.
.monaco-workbench .part>.content{font-size:15px}Search for the following classname and edit the font-family to change the font family. I have changed mine to the following
.monaco-workbench .part>.content>.monaco-progress-container .progress-bit{height:2px}.mac{font-family:'Bitstream Vera Sans',-apple-system,BlinkMacSystemFont,sans-serif}The new workspaces looks cool as shown below:
A word of warning. If you update your vscode, you will have to edit this file again until a plugin/extension is found that can be used to manipulate this directly or adjust it via a theme.