Journey of Creating a New Theme for VSCode

ANU1o
3 min readJul 24, 2023

--

It all started when I was designing a Portfolio website…

ANOOFILIUM THEME
Image from VSCode Theme

I just completed my Bachelor in Computer Application (BCA) course. All computer-related subjects went well. If not for that darn Statistics, I would have gotten my degree certificate and taken a master's in Computer Application. But hey, I got time to learn new stuff until those papers are clear and good to go. So I decided to pursue MEA(R)N Stack Web Development course in Luminar Technolab. The course takes 5 months and I got a year ahead until the next CAP registration opens up.

So one day, our tutor asked us to build a portfolio site after teaching HTML, CSS, and Bootstrap. I made websites before, during my college days as a part of curriculum projects. In 2 projects I used Bootstrap as my stylesheet framework and mastered it. Many components were in my head due to their frequent usage. A portfolio to showcase my creativity was long overdue so I started making one.

I cultivated a habit of getting a color palette for my project's visual appearance. Usually, I use Coolors for colors and the ones it generated so far didn’t match my vibes (for the first time). So I was basically in a brainstorming section when an idea jolted into my head.

The home screen on my mobile has the best color palette I loved.

Home “sweet” screen
My beloved Home Screen

With this screenshot, I generated a color palette and my design end is good to go. After 2–3 days my work was complete and I created this beauty:

Anoofilium Site… not hosted officially, still need to change that stock background😜

There were many changes made during the process of making this site. Many changes were made due to my rookie mistakes in the first commits. In the end, it turned out great and more enhancements are on the go.

After making this site and pondering its beauty, I thought how about creating a theme based on these color palettes, they do look contemporary to an extent. I always wanted to create a theme that was kinda named after me. So I went up to Google to learn how to make a VScode theme. A blog by Ivan Stevkovski beautifully explained the process and it helped a lot. His blog served as a guide and I followed it to create my first theme. At first, I changed components like side nav, title, status, and tabs. For further component editing, I referred VSCode Documentation on Theme Color.

Gradually I made appropriate changes and updates to get the theme where it is today. Right now as I'm writing this article, there are 12 installs of this extension and I’m already happy about it. At the end of the day, I’m just glad that my pastime hobby is being enjoyed by folks on the internet.

You can get the theme from here.

--

--

No responses yet