Styling VS Code

24 Jan 2021 Last modified at: 2021-03-07

I provide fonts, icons, and themes for adjusting the look of VS Code

I’m going to give some options for styling your vscode. We use VS Code daily, all day long. Why not set the icons, fonts, and theme to a style you like best? Your eyes will thank you!

I will edit this post as I find other themes I like.

The cover image actually uses a combination of two fonts, JetBrains Mono & Victor Mono! It is done using some trickery read about it here. The theme is a theme I created Dark SynthWave ‘84 with the glow enabled, not the default option of it off.

Everything in this post is geared towards dark mode as that is my preference.

1. Icon Themes
   1. Changing Selected Icon Theme
   2. Themes
      1. Material Icon Theme
      2. vscode-icons
      3. Default Icons - Seti
2. Fonts
   1. Ligatures
   2. Font Installation Directions
3. Themes
   1. Update your theme
   2. VS Code Themes I’ve Used in the Past
      1. Dark Synthwave ‘84 with Glow Disabled
      2. Dark Synthwave ‘84 with Glow Enabled
      3. Lukin Theme
      4. SynthWave ‘84 with Glow Disabled
      5. SynthWave ‘84 with Glow Enabled
      6. Snazzy Operator
      7. Material Theme Darker High Contrast
      8. Material Theme Ocean High Contrast
      9. One Dark Pro
      10. One Monokai
      11. Monokai - included with VS Code
      12. Monokai Dimmed - included with VS Code

If you like any of these options, tell me about it in the comments below. Have a theme you like that I’ve not demoed? Again tell me about it in the comments below.

Icon Themes

These will set icons for files and optionally folders.

Changing Selected Icon Theme

1. Optionally download a new icon theme
2. Go to Settings
3. Search for icon theme
4. Find the ‘Workbench: Icon Theme’ section
5. Select the desired icon theme

Themes

Material Icon Theme

This is my preferred icon theme.

vscode-icons

Default Icons - Seti

This one doesn’t have icons for folders

Fonts

The two fonts used in this post are JetBrains Mono and Fira Code. I recently switched to Jetbrains Mono.

Ligatures

There is this concept of coding fonts with two major benefits. They are mono-spaced, meaning every character is the same width. But the main draw is that they support coding ligatures.

Comparison of Fira Code with and without ligatures enabled.

JetBrains Mono doesn’t have as many ligatures as Fira Code

Comparison of JetBrains Mono with and without ligatures

Comparison of Ligatures

Font Installation Directions

1. Download the font you prefer

   • JetBrains Mono
   • Fira Code
2. Unzip the downloaded archive
3. Install the font
   • Windows:
     1. Select all font files in the folder
     2. Right-click any of them
     3. Pick “Install” from the menu.
   • Mac:
     1. Select all font files in the folder and double-click.
     2. Click open at the prompt
     3. Click Install Font
   • Linux:
     1. Unpack fonts to ~/.local/share/fonts (or /usr/share/fonts, to install fonts system-wide)
     2. fc-cache -f -v
4. Go to settings
5. To set desired font
   1. In the settings panel, on the left, Navigate to Text Editor>Font
   2. Set ‘Font Family’ to your preferred font, for example JetBrains Mono or Fira Code
6. To enable ligatures
   1. In the settings panel, on the left, Navigate to Text Editor>Font
   2. Scroll down to ‘Font Ligatures’
   3. click ‘edit in settings.json’
   4. set ‘editor.fontLigatures’ to true if not already set

Themes

Some themes come with its own icons and will override your selected icons. You can change it back after setting the theme if you want.

Not all themes use italics for certain things i.e parameter declarations or HTML attribute names.

Update your theme

To change your theme:

1. If needed download your theme
2. Go to Settings
3. Navigate to workbench>appearance
4. Change the ‘Color Theme’ setting to your preferred theme
5. If needed, follow the change the selected icon theme instructions

VS Code Themes I’ve Used in the Past

Dark Synthwave ‘84 with Glow Disabled

This is a theme that yours truly created. This is also my preferred theme, naturally

Dark Synthwave ‘84 with Glow Enabled

The glow effect requires additional configurations see the description of the theme.

Lukin Theme

SynthWave ‘84 with Glow Disabled

SynthWave ‘84 with Glow Enabled

My screenshots from here on in for sharing code will use JetBrains Mono with the glow enabled.

The glow effect requires additional configurations see the description of the theme.

Snazzy Operator

Material Theme Darker High Contrast

Material Theme Ocean High Contrast

One Dark Pro

One Monokai

Monokai - included with VS Code

Monokai Dimmed - included with VS Code