Ephraim Atta-Duncan
Ephraim Atta-Duncan

Ephraim Atta-Duncan

I built a VSCode Theme.... Kinda

I built a VSCode Theme.... Kinda

Ephraim Atta-Duncan's photo
Ephraim Atta-Duncan
·Sep 4, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction
  • The Why?
  • The How
  • The Lesson
  • Conclusion

Introduction

I had no idea what to do in week three. I suddenly got an idea while looking at the titles for the week. I know it's absurd, but the third week of the Writeathon ends on September 5th and I am writing this on the 4th, so bear with me. Now the idea, the title is obvious but if you still have no idea about my idea, I will tell you. A "really-boring" VSCode Color Theme. You read correctly. A boring color scheme that you will probably not use, but let's go on.

The Why?

Aside from the fact that I was procrastinating all week and I didn't have enough time to build something "meaningful", not that the color theme is not meaningful - you know what I mean, I have always wanted to build a VSCode theme and I used this opportunity to cross it off my bucket list. Why would I build a theme? Because I can, but more genuinely, I wanted to be more active in designing. This was the ideal chance for me to use design and technology to create something beautiful. The irony there, I know 😂.

The How

One challenge remained once I made the decision to create a theme. Colors. The most fundamental prerequisite for any color theme, and I was having trouble with it. It felt like spending a long time looking at fonts before deciding on Poppins once more, like I do every time. I chose the Writeathon banner after experimenting with a ton of different color schemes. I know; you remember when I said it was absurd. Anyway, I used a color palette generator to generate the color palette below from the blog banner. I decided to stick with the new color scheme and develop the theme with it.

Hashnode Writeathon Color Palette.png

With the palette at hand, I sat down in front of my computer, created a VSCode Color Theme Boilerplate, and got to work. Finally, no more procrastion, I said to myself, you know how it turned out.

After hours of copy and pasting hex color codes and switching windows to preview, this is what I came up with.

Screenshot 2022-09-04 at 21.14.11.png

Don't judge me just yet; this is the pre-beta. The most unstable, bug-ridden code you have ever encountered. It's not great, but I'm willing to make it better. You can assist me here because it's open source.

The Lesson

Through this little project, I learned a lot. Procrastination is bad, to start with. Although I was aware of this, I had personal experience with it, another one. Work as soon as you can. I run out of time, therefore I'm pushed buggy code. Don't do it.

Next is Color Theory. Before I made the decision to create this theme, I was unaware that such a thing existed. Yes, color harmony and theory, namely how colors connect to one another and which hues, tints, and tones work best together for the most appealing designs. As an aside, I found this fantastic resource to comprehend Color Scales for UI Designing and Frontend Development.

color-scale

As a developer, I struggled with designs, as do 90% of developers, therefore I never truly understood the design process. This project helped me appreciate designing. I had the experience of trying to develop something for hours on end without writing any code. I had an idea for a TypeScript-based VSCode Extension, but I chose to build the theme instead because it seemed worthwhile and it was worth it.

Conclusion

The theme is called "Minimal" because there aren't many colors in it, only five, and it appears to be minimal. It is available on the VSCode Extensions Marketplace and is open source. Try it out and file a bug report or a suggestion if you find anything.

Thank you.

 
Share this