Finding the right theme.

I spend a lot of my time staring at code and for a long time I was a loyal user of Sublime Text (with the classic Monokai theme). At some point (who am I kidding it was 19th Oct 2016) I switched to VSCode and I swiftly ditched my old friend Sublime like a tonne of bricks. I will forever be reminded of my anniversary with VSCode because I tweeted about it. I broke up with Sublime Text over twitter, what a jerk!

Sorry Sublime, you were great, but VSCode just gets me.

With a new editor in play it was time for a new look, so my search for the best theme began. Here are my favourite VSCode themes:

Rainbow

I was recommended this theme by Rachel Smith and it is the one i’m currently using at work right at this very second (depending on when you read this, but probably right now).

You’ll soon discover that I prefer dark themes and this one has a really nice combination of colours. My favourite thing about it is all the purple (I’m very pro purple).

The downside is that I’m not a fan of orange and there is a lot of orange in the CSS. So at work because we use Glamorous for our CSS (which is just JS) I use Rainbow. However at home, I use Dark Dracula because I write scss and I cannot stand staring at all that orange.

Rainbow is very beautiful for JS though! Look at that, spectacular.

Rainbow Theme for VSCode

Dark Dracula

My other favourite theme is Dark Dracula. I cannot recall how I stumbled across this theme, I was probably being forced to fulfill my destiny of fighting vampires and…wait that is the plot of Buffy. Nevermind, all that matters is that we found each other. Much like Buffy found Angel.

You might be thinking, why not just use Dracula Mandy? Dracula is cool and all but personally I find the darker background that Dark Dracula provides easier on my eyes.

There is a lot of pink and blue in this theme, which I appreciate, I just wish there was more purple, I feel like Dracula would be very pro purple. The best thing about this theme is the very minimal orange (at least for the code I write). Uggh orange! Orange is the worst.

Material Theme

So I added in Material Theme because a heap of people recommended it to me. I personally don’t really like it, I find the file name colour way too light and why is there so much orange?

But the masses spoke so here it is.

Tomorrow Night

This one I stumbled across with some nifty googling, I’m pretty fond of the JS side of things, it’s pretty gentle on the eyes and it’s got enough variation that it’s easy to scan. I quite like the slightly muted colours, sometimes the brightness can be a bit overwhelming.

Code is stressful enough without feeling like you are at an epic 90s rave.

The reason I didn’t go with this, you guessed it, the CSS is full of orange. I must be an anomaly in the community, the only one who dislikes so much orange.


Bonus

During my search for a theme I was also trying to find a nice font. These are my favourites.

Fira Code

This is the font I settled on, i’m really happy with it, even switched my Codepen theme to use Fira Code. (Yes you can do this, I was very excited when I found out).

I absolutely adore the ligatures in this font, i’m less fond of the hamburger style triple equals but i’ll tolerate that for the sweet arrow.

Source Code Pro

I used to use source code pro, a solid font, also available on Google fonts it’s a nice option.

Input

A bunch people in @fendersperth recommended Input to me as a good coding font. To be honest it wasn’t really for me, but as it was recommended so much I thought i’d include it.

I did like that you could customise certain letter types, width etc when you go to download, that is a nice feature. Thumbs up to that!

Operator Mono

This is the only font in my list that you have to pay for, and it is a beautiful font if you got the cash to spend on it. You can trial it on your Codepen account if you want to try before you buy.

You can use the font with or without the italics, personally I really like the italic version, it’s stunning. The only reason I haven’t purchased it is because I really dislike the italic “r”. I have a particular aversion to it, I find it really hard to read, it’s kind of like an “s” but also a weird “u”. This is very similar to my dislike of orange.

People are weird.

Note: To make the most of the ligatures in fonts like Fira Code if you are using VSCode you have to enable ligatures in your code editor by setting `editor.fontLigatures”: true` in settings.json.


That is all folks. Good luck finding your perfect theme, I hope these help. If you have any good suggestions post in comments, particulary if you have a good light theme.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.