{"id":135,"date":"2019-12-10T21:20:41","date_gmt":"2019-12-10T21:20:41","guid":{"rendered":"https:\/\/www.srivittal.com\/wp\/?p=135"},"modified":"2021-08-31T10:12:24","modified_gmt":"2021-08-31T09:12:24","slug":"modify-visual-studio-code-explorer-sidebar-font-size","status":"publish","type":"post","link":"https:\/\/www.srivittal.com\/wp\/?p=135","title":{"rendered":"Modify Visual Studio Code Explorer, Sidebar font size"},"content":{"rendered":"\n<p>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 &#8220;Toggle developer tools&#8221; option within vscode that provides access to what Stylesheets are being used to render the entire vscode interface.<\/p>\n\n\n\n<p>Check out the image below. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1499\" src=\"https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-scaled.png\" alt=\"Visual Studio Code Interface\" class=\"wp-image-137\" srcset=\"https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-scaled.png 2560w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-300x176.png 300w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-768x450.png 768w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-1536x899.png 1536w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-2048x1199.png 2048w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-1600x937.png 1600w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-20.59.15-1-780x457.png 780w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>As can be seen above (yes, I was learning ReactJS on Udemy &#8211; Checkout this course <a href=\"https:\/\/www.udemy.com\/share\/101WbyBkscdV1RRno=\/\">here<\/a>, 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:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/Applications\/Visual Studio Code.app\/Contents\/Resources\/app\/out\/vs\/workbench\/workbench.desktop.main.css<\/code><\/pre>\n\n\n\n<p>Search for the following classname and edit the font-size to change the font size. I have changed it to 15px. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.monaco-workbench .part>.content{font-size:15px}<\/code><\/pre>\n\n\n\n<p>Search for the following classname and edit the font-family to change the font family. I have changed mine to the following<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.monaco-workbench .part>.content>.monaco-progress-container .progress-bit{height:2px}.mac{font-family:'Bitstream Vera Sans',-apple-system,BlinkMacSystemFont,sans-serif}<\/code><\/pre>\n\n\n\n<p>The new workspaces looks cool as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1496\" src=\"https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-scaled.png\" alt=\"\" class=\"wp-image-138\" srcset=\"https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-scaled.png 2560w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-300x175.png 300w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-768x449.png 768w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-1536x898.png 1536w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-2048x1197.png 2048w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-1600x935.png 1600w, https:\/\/www.srivittal.com\/wp\/wp-content\/uploads\/2019\/12\/Screenshot-2019-12-10-at-21.19.17-780x456.png 780w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>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. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;Toggle developer tools&#8221; option within vscode that provides access to what Stylesheets are being used to render the entire vscode interface. Check out &hellip;<\/p>\n","protected":false},"author":2,"featured_media":137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[68,67,65,66,69,64],"class_list":["post-135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio-code","tag-customizations","tag-font","tag-javascript","tag-stylesheets","tag-themes","tag-visual-studio-code","entry entry-center"],"_links":{"self":[{"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=135"}],"version-history":[{"count":1,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/135\/revisions\/139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.srivittal.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}