Blogs

Fresh Paint - Give VS Code a New Look

Having a great looking editor is a necessity for any full-time developer. We spend a lot of time in our editor and we like to keep things fresh and interesting!

Visual Studio Code supports a lot of customizations, in particular the look of your environment. In this blog, we're going to look at Color Themes, File Icon Themes, and other settings to change the look and feel of the code editor.

Color Themes

A powerful customization is the ability to change a Color Theme. A Color Theme is a set of colors for the editor background, text, language syntax, etc. VS Code comes with several built-in themes and there are hundreds you can install from the Marketplace.

Some of the favorite themes used the VS Code team are Sapphire, Nord and Ayu, shown below.

Sapphire Theme

Nord

Ayu

File Icon Themes

Using a File Icon Theme helps you quickly see file types in the Explorer and tabs through colorful icons. Here is a screenshot of supported icons from VSCode Great Icons.

Just as with Color Themes, there are many popular File Icon Themes in the Marketplace.

Font Ligatures

There are many settings you can tweak to make VS Code look good. One of my favorites is font ligatures, where two characters are combined into a single expressive character. Enable font ligatures by setting "editor.fontLigatures" to true. You must have a font installed that supports font ligatures, such as Fira Code.

How do you make your editor look good?

What do you do to make your editor look good? Ping me on Twitter and I'd love to share your tips in a future blog post.