DEV Community

Cover image for 5 of the best VS Code themes compared - an opinionated review
Arek Nawo
Arek Nawo

Posted on

5 of the best VS Code themes compared - an opinionated review

This post was taken from my blog, so be sure to check it out for more up-to-date content.

Every programmer needs to have a code editor of his own. Whether it's a simple text editor, terminal-based app or a full-blown IDE - you have to have one. With that said, you most likely know that recently (especially in the web development department), an open-source code editor from Microsoft - VS Code - has taken the majority of developers by storm!

Because of its impressive set of features, VS Code presents a unique choice for programmers. Not only has it a well-developed ecosystem of extensions, improving the day-to-day use, but it's also themeable! In this way, you can either customize the editor on your own or use one of many themes available in the VS Code marketplace.

But, should you really care about how your code editor looks? Shouldn't it be just a tool to "get the job done"? Well, I guess many people will have their own opinions, but - from my personal experience - I consider this "detail" a very important one. In my opinion, a good-looking tool can greatly influence how productive I am - the prettier the tool, the more likely I am to do something useful with it. Besides, as you'll probably spend a lot of time using this editor, I bet you don't want to continuously look at some piece of garbage (or at least something that you don't like much) all the time!

So, in today's post, I'd like to present to you with what I consider 5 of the best VS Code themes, that you can find and use for free through its marketplace! We'll go over their strengths and weaknesses. We'll compare them to determine which one is the best! Just keep in mind that some of my comments might be a bit opinionated (as all things are) so take them with a grain of salt. Let's start!

One Dark Pro

Starting with the most popular theme (according to downloads count) - we have the One Dark Pro. Coming at shy 12.5M downloads, this theme is based on the default theme's color palette of Atom - another code editor. Now, the question is - where such popularity comes from?

In one of my previous articles, I compared the VS Code and Atom against one another. In this comparison, while VS Code was a clear winner in most categories, Atom deserved some kudos for its design and aesthetics. Even though VS Code looks great in general, it's the Atom editor, that has won in the design category. Not only has it somewhat cleaner and more minimalistic UI, but also a well-balanced default theme - One Dark - for both actual UI and syntax highlighting. And that's where One Dark Pro takes its inspiration from...

The overall look and feel of this theme is great! It comes in 3 variants - standard, bold and vivid, with each name being representative of some slight differences in the look of syntax highlighting. Just like in the original version - the theme is dark-only (Atom's light theme is separate and it's called One Light). Colors are well-balanced, and contrasts are right in place. With such a great theme - the choice comes down to personal preference.

I think One Dark Pro is a great choice for all of those who simply want to have a nice-looking theme and not worry about anything else. But, because I'm a little picky, I prefer themes that come in both light and dark variants. I use the light one during the day, while the dark one - during the night. I know that the name itself indicates that it's not a light theme, but still... Surely you can find some spin-offs of Atom's One Light theme, but it doesn't change the fact this particular theme is not a "complete package".

Material

The next popular theme is the one based on Google's Material Design (MD) - Material Theme. It features a nice and minimalistic look - just like the MD empathizes. It comes in 5 variants - Light, Dark, Darker, Palenight, and Oceanic - with each of them having its respective "high-contrast" counterpart.

Material Theme has been my go-to for a long time - and for a good reason! When you think of it, Material Theme checks almost all the boxes required for a good theme. First, it comes in multiple light and dark variants (although it still favors the dark ones). Secondly, it gives you the ability to customize its accent color - a subtle but very much appreciated detail! It also follows MD guidelines (obviously), which I can only think of as an advantage. I like MD and think Google has done some great job working on it. Many modern web and Electron-based apps either use it directly or are inspired by it in one way or another. Material Theme is no exception.

The only reason I've switched is, again, because of the light theme. After using it for a certain amount of time, I started noticing smaller detail, e.g. how the contrasts are lacking. Little details like directory name in the integrated terminal, the text on the buttons of pop-up notifications or VS Code's peek definition features - all were really hard if not impossible to distinguish or even see. And yes - I'm talking about the "high-contrast" version too! Anyway, if you're not using the light themes, Material Theme might turn out to be a compelling option for you - especially in its lovely Palenight variant!

Dracula Official

A very popular theme named after a very popular vampire - Dracula Official is known and loved by many developers and "casual" users alike. Why's that? Mostly because Dracula is a great theme, but also because of its portability.

While One Dark Pro might be a port of Atom's One Dark, and Material Theme is an implementation of the much broader standard of a similar name, none of them is directly available for as many applications as Dracula. The Dracula theme project covers almost 50 different apps - including VS Code, Atom, Slack, Vivaldi (a web browser), and many more! If you're using at least 2 of the supported apps, you might consider this theme just for the sake of consistency.

Vampires like Dracula don't like light, and thus there's not even a chance of having such a variant here. The only choice you're getting is between the default and Soft variant, which features a bit more subtle, grayish syntax and icons' color. Contrasts are certainly there and are very noticeable. The additions of some very dark colors, make the theme look great when used during the night. On the light of day, however, it can feel a bit... harsh.

Overall, I'd certainly recommend this theme to every fond of consistency and darkness vampire. ;)

Nord

Nord is a perfect example of what I call an oceanic theme. It's perfect for those who want a non-light theme that's not too dark, or just don't like vivid colors. The theme empathizes on different variants of blue - both for its accent color and syntax highlighting.

Just like the previous theme on this list, Nord is very portable and made available across almost 35 different apps. It might not be as wide-spread as Dracula, but it's certainly very portable.

The very thing that makes Nord special is its subtle syntax highlighting. Even though its north-blueish (that's what they call it) colors are pretty soft, the syntax maintains a great level of readability and a good feel for the eyes. Certainly, if you prefer more vivid colors (like I do), or you simply don't like blue - this theme might not be your best choice.

Horizon

Finally, we're closing the list with what's currently my go-to theme - Horizon. Even though it's last when it comes to downloads count (but it's still around 400K), Horizon stands out from the rest with its great contrasts and color palette.

Horizon comes in light and dark variants, from which both have Bold and Italics options for syntax highlighting adjustments. The light theme is very good - especially when comparing it to other light themes on this list. It has great contrasts (everything is clearly visible), vivid syntax highlighting, and increased color temperature, to make it good for the eyes. The dark variant plays by similar rules. It stands-out with its vivid syntax highlighting and the use of some very dark colors. I'd say that those looking for a truly dark theme will be happy with it.

Overall, I consider Horizon to be the best theme on this list. Now, it certainly doesn't provide all the goodies, like adjustable accent color or cross-app portability. But, with the inclusion of well-design light and dark variants, great contrasts and vivid syntax highlight, I'd say it provides the best "complete package" that one might want for VS Code.

Is there something missing?

So, that's my list of the best VS Code themes. Like I said multiple times now, it's quite opinionated and definitely won't be the same for everyone. It's natural that everybody has different needs and preferences. Still, if you haven't decided on your favorite theme yet, or you're just getting started with the VS Code, I highly recommend that you check out any of the listed options. Also, maybe there are some different themes that you use and want to share with others? If so, write them down in the comment section below!

If you want to stay up-to-date with the latest posts from this blog, be sure to follow me on Twitter, Facebook or Reddit. By the way, I've also started a YouTube channel, and you might want to check it out. As always, thank you very much for reading this piece, and have a nice day!

Top comments (38)

Collapse
 
mindyourlifeguide profile image
Bohdan Petrov • Edited

I like my theme, which is not surprising)
Based on One Dark + Material Design + custom color.
I’m thinking about a light theme for the future, but haven’t looked at anything yet.

Collapse
 
mateiadrielrafael profile image
Matei Adriel

For a second i thought thats vscode and i wanted to ask how can i remove the bar with the icons from the left

Collapse
 
mindyourlifeguide profile image
Bohdan Petrov

It is possible to remove both the icons on the left and all open menus.


In vscode, this is also possible.

Thread Thread
 
mateiadrielrafael profile image
Matei Adriel

Can you share your settings.json?

Thread Thread
 
mindyourlifeguide profile image
Bohdan Petrov • Edited

dropbox.com/sh/7btm53ws0846ndt/AAA...

You can designate keys convenient for you. The parameter is called "activityBar"

File -> Preferences -> Keyboard Shortcuts

If you mean these menus as in the picture, then this is ctrl+b

Collapse
 
germanocorrea profile image
Germano Corrêa

I believe Monokai Pro is the best one. I can't feel comfortable with other themes, and believe me, I tried. Colors are just great and fit right in the syntax, where other themes (some that you have mentioned) mix colors in confusing ways. Things are neat and understandable with Monokai Pro. Love it.

Collapse
 
patricnox profile image
PatricNox

I used this as well, it's very neat. Though after a while I turned bored having such a dark theme so I followed Wesbos's theme Cobalt 2.

Found it in his podcast, SyntaxFM and been using it ever since. It's somehow a perfect pair programming theme as well!

Collapse
 
germanocorrea profile image
Germano Corrêa

I agree with you that sometimes it gets boring, that's why I try a lot of different themes, but there is always something in those that makes me feel uncomfortable with. So I end up always switching back to Monokai Pro.

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio • Edited

I think Gruvbox theme is great for eyes and syntax highlighting. With brownish color with dark theme. And this work great with iosevka font and ligature coloring

Check this theme
marketplace.visualstudio.com/items...

Gruvbox theme

Collapse
 
gema profile image
Gema Anggada • Edited

TBH, I really like this one! pretty easy on the eyes. But IDK if it's just me, but this theme eventually does make me sleepy lol.

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Don't worry, we have made some themes that enjoy to use. Try this out.

my vs code setup

My current VS Code Setup :
Theme : Mayukai Theme

Collapse
 
mcnerdius profile image
McNerdius

Field Lights theme + Iosevka font is my combo of choice. Field Lights is a bit less dark than usual but the contrast is still good IMO, as is the syntax coloring. Iosevka is great because you can pick and choose individual character and ligature options, no compromises. And it's skinnier than most mono fonts. Ayu Light is my go-to light theme. 👍

Collapse
 
benyamynbrkyc profile image
benyamynbrkyc

I just converted to Field Lights. It's such an amazing theme. Thanks for pointing it out. Goes especially well with Iosevka

Collapse
 
sveggiani profile image
Sebastián Veggiani

I'm glad you like it!

Collapse
 
sveggiani profile image
Sebastián Veggiani

I'm glad you like it!

Collapse
 
tuljmdev profile image
tuljmdev

I can't even seem to convince myself to look at another theme after installing Synthwave '84.

Collapse
 
wkrueger profile image
wkrueger

Synthwave is so great (i dont use the glow).

It looks a bit similar to dracula in its strong contrasts, but with slighly different colors.

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

No no no :) My eyes hurt from the Synthwave :) Material Design 4 life :D

Thread Thread
 
pszndr profile image
Paulo

I use Material Synthwave, best of both worlds

Collapse
 
cadams profile image
Chad Adams • Edited

I kinda of like the default theme tbh.. I've tried other themes but they hurt my eyes.. I don't know if it's because they use too many colors or too dark. Default theme is good on my eyes in both a dark or light room.

Collapse
 
sobolevn profile image
Nikita Sobolev

I love ayu theme!

Ayu

Check out my dotfiles to have the exact same setup.

GitHub logo sobolevn / dotfiles

dotfiles for the developer happiness: macos, zsh, brew, vscode, python, node, elixir

sobolevn's dotfiles

sobolevn's dotfiles

Here are some articles I wrote about my environment:

Contents

What's in there?

  • all my brew dependencies including: applications, fonts, etc. See Brewfile
  • all my macOS configuration. See macos
  • all my shell configuration including my own sobole theme. See shell/ and config/zshrc
  • all my vscode configuration. See vscode/

Installation

We are using dotbot to set things up. Steps:

  1. Clone this repo
  2. cd into dotfiles/ folder
  3. Run: ./install

CLI

I am using both hyper and default Terminal App as terminal emulators I am using zsh with oh-my-zsh as a main shell And zplug to manage shell plugins I also have a lot of tools to make my working experience better.

I mainly work with three stacks:

  • python
  • node + vue + typescript
  • elixir

So, they are configured nice and smoothly You will have configured…

Collapse
 
mjmacheli profile image
mj

hi, I hope you're doing well
I have been struggling to setup your zsh theme to be white.. and it seems to be abt the light theme for terminal out there, as per the docs, it it supposed to be light by default but that is not the case with me.. please help if you have time, I use Mac BigSur

Collapse
 
jarodpeachey profile image
Jarod Peachey

I'm going to point out my personal fave: the default VSCode Dark+. The colors all stand out amazingly, and I love it. Switching to another theme would annoy me to no ends because the color for strings in JS would be different 😂

Collapse
 
3zzy profile image
Ibrahim Ezzy

I tried many but keep going back to Ayu

Collapse
 
djensen47 profile image
Dave Jensen

Halcyon, Cobalt 2, and Solarized Dark.

I'm generally not a fan of red text in the editor. Makes it look like an error.