01-Nov-2021| Dev Tools |8 min read

What makes VS Code stand out from other source code editors? There is no simple answer to that question, as it is a combination of factors. However, it’s safe to say that the sheer number of themes available for VS Code is one of them. Themes allow you to choose a color palette that minimizes your eye strain and makes it easier to detect errors in the code.

With that in mind, this article will explore the 5 best VS Code themes that will allow you to maximize your productivity and enjoy a more pleasurable visual experience.

Criteria Used to Choose the Themes

When it comes to style and color preferences, it’s almost impossible to be completely objective. Some developers love dark themes, while others are more productive with light themes. That said, how does one choose the top 5 VS Code themes?

The following criteria were used to select the themes that make up this list:

  • Community. The theme must have adequate documentation and support, as well as an active community to back it up and keep it updated.
  • Customization options. The theme should be easy to customize using the guidelines and best practices described in the VS Code documentation.
  • Accessibility. The theme should have an appropriate color selection to prevent visual fatigue and make it easy to spot errors in the code.
  • Supported languages. The theme should have support for a wide variety of programming languages.
  • Popularity & Rating. Last but not least, the theme should be one with a high popularity and rating from its users. Generally, a theme that has been downloaded thousands of times and has hundreds of positive reviews is a top choice because it meets all the points mentioned above.

Installing a VS Code Theme

Installing a theme is quite simple. VS Code comes with over a dozen themes by default, including a variety of light, dark, and high-contrast themes. Additionally, you can also choose from countless themes available in the VS Code Marketplace, and if none meet your needs, you can even create a theme of your own.

To select an already installed theme, you must open the Color Theme picker:

  • Windows: File > Preferences > Color Theme (shortcut Ctrl+K Ctrl+T)
  • macOS: Code > Preferences > Color Theme (shortcut ⌘K ⌘T)

Once selected, the theme will be applied immediately.

Select a theme

If you want to add new themes to the list of available options, the easiest way is to search for one in the Marketplace. For this, you can either choose the last option from the list of installed themes, Install Additional Color Themes, or you can click the Extensions button. In the latter case, be sure to type in the search bar “category:themes”.

Install a theme

By selecting any of the available themes, you will see a preview of the style and colors used. To install any theme, just click the Install button, and it will be added to your list of available themes.

Install from marketplace

If none of the Marketplace themes are to your liking, you can create your own, either from an existing theme or from scratch. The themes documentation describes the procedure in detail. Alternatively, you can use an online theme generator like Theme Studio for VS Code to help you create a visual theme.Theme Studio

5 Best VS Code Themes

Based on the criteria detailed above, here are the five best VS Codes themes:

  • One Dark Pro
  • Monokai Pro
  • Cobalt2
  • Noctis
  • Night Owl

Read on to learn more about each!

One Dark Pro

One Dark Pro

One Dark Pro

PROS:

  • The most popular VS Code Marketplace theme
  • One of the best dark themes currently available
  • Constantly updated, thanks to its incredible community
  • Easy to customize
  • MIT License (MIT)

CONS:

  • Light theme version is not included

One Dark Pro is the most downloaded theme in the marketplace, and it’s no wonder—this theme is none other than the VS Code version of Atom’s iconic One Dark theme. The combination of a vivid color palette and a background with the ideal level of darkness makes One Dark Pro one of the best alternatives for lovers of modern themes. For an even cleaner experience, the developers include the One Dark Pro Flat, which changes the workspace colors slightly.

VS Code theme variations included: One Dark Pro, One Dark Pro Flat.

One Dark Pro Flat

One Dark Pro Flat

Monokai Pro

Monokai Pro

Monokai Pro

PROS:

  • Exceptional user ratings
  • Includes pixel-perfect file icons
  • Comes with different “filters” to suit your preferences
  • Excellent color palette selection
  • Ideal for multi-monitor setups

CONS:

  • Requires purchasing a license for extended usage

Although the extended use of Monokai Pro requires the purchase of a license worth €9.95, it is well worth it. This theme stands out for its attention to detail in color selection, matching icons, and filters (child themes) that enhance its functionality. The included variations (octagon, ristretto, spectrum, and machine) allow this theme to easily adjust to any monitor, regardless of brightness or contrast settings. This can be especially useful in multi-monitor setups with different aspect ratios since you can quickly change the “filter” to match different brands’ color temperature settings when moving the VS Code window around. All in all, if you prefer dark themes, Monokai Pro is one of the best options available.

VS Code theme variations included: Monokai Pro, Monokai Pro Octagon, Monokai Pro Ristretto, Monokai Pro Spectrum, Monokai Pro Machine.Monokai Pro OctagonMonokai Pro Octagon

Monokai Pro RistrettoMonokai Pro RistrettoMonokai Pro Spectrum

Monokai Pro SpectrumMonokai Pro MachineMonokai Pro Machine

Cobalt2

Cobalt2

Cobalt2

PROS:

  • Based on the classic “Cobalt” theme
  • Excellent accessibility in all lighting conditions
  • Available for other popular applications
  • Straightforward customization
  • MIT License (MIT)

CONS:

  • No child themes

From an accessibility point of view, themes based on the legendary Cobalt are hard to beat. The combination of a matte blue background with a rich palette of contrasting colors in Cobalt2 makes it easy to work for hours without eye strain. Moreover, an advantage of this theme is maintaining a consistent experience across applications, as it is available for iTerm2, Alfred, Slack, and more.

VS Code theme variations included: Cobalt2

Noctis

Noctis

Noctis

PROS:

  • Comprehensive number of themes with different styles and color palettes (warm, cold, and medium contrast)
  • Designed to be easy on the eyes
  • Includes 8 dark and 3 light child themes
  • Natively supports a large number of programming languages
  • MIT License (MIT)

CONS:

  • Some of the color palettes may be too extreme

If you are undecided between choosing dark or light themes, Noctis may be just what you are looking for. After installing Noctis, you will have 11 variations to choose from, including dark themes with different shades, several light themes, and even intermediate themes. This versatility gives you the ability to try different palettes until you find one (or more) that suits your taste and mood. Additionally, if you have little experience using VS Code, Noctis can be a good starting point to explore the type of theme you like best.

VS Code theme variations included: Noctis, Noctis Lux, Noctis Hibernus, Noctis Lilac, Noctis Azureus, Noctis Bordo, Noctis Obscuro, Noctis Sereno, Noctis Uva, Noctis Viola, Noctis Minimus.

Noctis Lux

Noctis Lux

Noctis Hibernus

Noctis Hibernus

Noctis Lilac

Noctis Lilac

Noctis Azureus

Noctis Azureus

Noctis Bordo

Noctis Bordo

Noctis Obscuro

Noctis Obscuro

Noctis Sereno

Noctis Sereno

Noctis Uva

Noctis Uva

Noctis Viola

Noctis Viola

Noctis Minimus

Noctis Minimus

Night Owl

Night Owl

Night Owl

PROS:

  • Ideal for those who switch between dark and light themes during the day
  • Extraordinary selection of colors for both themes
  • One of the best-rated independent themes
  • Its incredible community has ported the theme to a staggering number of applications, including terminals, text editors, and more
  • MIT License (MIT)

CONS:

  • Themes may be too dark or too light for some people.

If all you need is a dark and light theme, then Night Owl might interest you. Each variation is intended to help you reduce eye fatigue, although, unlike the other themes on this list, the choice of colors can be extreme for some. The Night Owl theme uses a deep dark background and colors that make the code stand out, while Light Owl uses a combination of a white background with bold colors. This theme is intended to be used at intervals depending on the time of day, which fits perfectly with the style of many developers who want to avoid the monotony of a single theme throughout the day.

VS Code theme variations included: Night Owl, Light Owl.

Night Owl Light

Night Owl Light

Conclusion

This blog post discussed the elements that make a VS Code theme stand out from the rest: a color palette that does not produce eye strain, but also allows you to spot syntax errors easily, a robust community that supports the theme, and the ability to adapt the theme to your needs.

Depending on your preferences and visual acuity, the ideal theme for working at night or in low light conditions could be a dark theme such as One Dark Pro, Monokai Pro, or Night Owl. On the other hand, if you work in a brightly lit area, light themes such as Noctis Lux, Light Owl, or even Cobalt2 might be a better alternative.

Everyone is different and has different needs depending on visual and technical preferences, so it is handy to have different themes that suit your preferences ready to use when required. Next time you need a new theme, be sure to give one of these a try.

Damaso Sanoja
Damaso Sanoja is a mechanical engineer with a passion for cars and computers. He's written for both industries for more than two decades.

All the Lightrun News That’s Fit to Print(f)!

Get the latest posts, news,
feature releases, updates, and articles directly to your inbox