VSCode Themes — Is it hard to make your own?

Mohammed Tantawy
3 min readOct 25, 2020

Are you happy with what the marketplace offers?

The past couple of months, I realised something. Of all the themes on vscode marketplace, none of them suited needs. And I guess that I’m not the only one.

Although we agree on general rules, we all have a different understanding of how light or dark we like the screen we’d like it to be, how colourful or plain we want the text, italics, bold, and so on.

I understand that sometimes can be daunting to create a theme, especially if you have little time to spend on it after work. But there are plenty of people who went through the same and can offer their experience.

So where do I begin?

It’s pretty easy to get started. There are a few options:

  • You can create a new project and get started following this fantastic tutorial. The author (Sarah Dresner) does a great job of explaining the process in details and gives some tips on how to find colour combinations and more.
  • Alternatively, you could fork an existing project and give your spin, but sometimes that could mean get familiar with someone else work first.
  • Or, when generating the boilerplate code with yo code, you can give a starting combination of your choosing from this website.

It’s a process that requires a bit of patience, but I found it rewarding.

After creating and perfecting your style, you can save it in your .vscode folder on your computer and use it privately or share it with the world, and if that’s your choice, this guide is excellent.

The beautiful thing of being a developer that we can pretty much build everything we need and we feel generous, we share it with others that find it useful. And that’s what I did.

What’s your creation?

I created a few but never published until yesterday. I was talking to some of my colleagues at work, and notice how they talked about creating a theme or an extension as something impossible. So I decided to write this article to encourage someone else to do it!

Uplift theme for VSCode

My work is here. Please have a look and as always I would love to hear what you think about it!

Of course, it’s still a work in progress, but it’s something that I will regularly use so there will be plenty of testing.

What did you think about the whole process?

At first, I was a bit confused because I didn’t find specific resources and I found the documentation a bit lacking (that’s a first, LOL). But once I read the article that got me started, it was fun.

My advice is: do something that you like or simply find useful and put it out there. Someone might give you pointers, or with the time you’ll improve on your work, and that is still a great thing.

Of course it won’t be quick, finding the properties to modify to get the desired result takes a bit of trial and error but get something started.

How did you approach the problem?

I think of themes like something pretty, yeah, but needs to serve a purpose. For me, what works in themes is colour association.

If I know that specific colours mean something, it’s quick and easy to scan a codebase and find it. Therefore, when I choose the combinations, I tried to do that. For you, it might differ. You might need something different to get you focused and more productive.

I didn’t want this to be another of the many how-to articles. I wanted to make something different where you’d see another aspect of creating your theme.

That concludes my thoughts about VSCode themes. If you have questions or want to share your thoughts about the topic, leave a comment!

--

--

Mohammed Tantawy

Software Developer. Currently aiming for something big.