DEV Community

Cover image for I created a VS Code theme 🔥️
Shaan Alam
Shaan Alam

Posted on

I created a VS Code theme 🔥️

Hi everyone!!
It's been too long since I wrote a post on dev.to, but hey, here I am back once again. I've been busy with my college stuff going on lately. Today I am going to talk about something that I thought was so hard (atleast for me) and amazing at the same time. I always wondered "How do they create a VS code theme/extension so wonderfully ??", and some days back I thought to give it a go and create something that I can be proud of!

So, I decided to create my own theme for VS Code. It's called Martian Night. (Don't worry, I will tell how I got the theme name idea). I watched some of the YouTube tutorials on how to create a vs code theme and got some idea. Basically, what I learned is that in order to create a vscode theme one has to edit a very large JSON file. At first, I was overwhelmed, but still I kept going. I thought may be not the whole JSON file, but I can definitely edit some of the settings in order to create a very basic theme. So I started reading VS Code extension API docs and setting colors for different components of the VS code as well as the tokens used in programming languages. I have done theming for HTML, CSS, JavaScript till now and I'll add more later.

So, where did I get the theme idea 🤔️ ??

Have you ever seen Sunset on planet Mars video captured by NASA's Curiosity Rover on social media ?? I absolutely loved that video and that's where my theme is inspired from. The colors used in the theme as well as the name of the theme is inspired from that video. The theme uses a background of dark blue with light blue and white text on the foreground. Also, the color of the comments in the code is some what similar to the color of Martian soil i.e red.

Enough of the talk, let's take a look at the theme itself!!

Alt Text

Alt Text

Alt Text

I'd love you to install this theme and give your feedback, so that I can improve this in future !! Also, the GitHub Repo is mentioned below, just in case you want to contribute to this teme. Feel free to leave a 🌟️

GitHub Repo => https://github.com/shaan71845/martian-night-vscode-theme

Download the theme from here => https://marketplace.visualstudio.com/items?itemName=ShaanAlam.martian-night

My GitHub Profile => https://github.com/shaan71845

Top comments (17)

Collapse
 
sonulohani profile image
Sonu Lohani • Edited

This is same as vscode default dark theme with blue color as too dark. I would still prefer default color theme. The dark blue color text is very hard to read.

Collapse
 
shaancodes profile image
Shaan Alam

Thanks for the feedback...I will definitely improve this theme.. 😊

Collapse
 
vikkrantxx7 profile image
Vikrant Sharma

At least you tried 🥳

Collapse
 
shaancodes profile image
Shaan Alam

Thanks man 😊

Collapse
 
mohitms007 profile image
mohitms007

The font is fira code but looks really good on this theme. What are your settings(bold, font-size) for your setup.

Collapse
 
shaancodes profile image
Shaan Alam

My settings are
Font - Fira code (sometimes operator mono as well)
Font Size - 14px
And font weight is normal

Collapse
 
robertokello11 profile image
Robertokello11

To create such you have to be good in js so am having a problem there how do become good in js

Collapse
 
shaancodes profile image
Shaan Alam

Practice JavaScript and create small projects to learn the fundamentals. Btw, for creating a theme, I just had to edit a long json file which I am sure you can do if you have little bit of javascript knowledge.

Collapse
 
mh_shifat profile image
5hfT

can you suggest me some resource tutorials to create vs code extension or theme?

Collapse
 
shaancodes profile image
Shaan Alam

I watched codercoder's YouTube tutorial for creating this theme...You can follow that tutorial too..it's awesome !!

Collapse
 
mh_shifat profile image
5hfT

thanks

Collapse
 
devinthemtn profile image
devinthemtn

I really like the dark blue. Its looking nice to me thanks for the work on it.

Collapse
 
shaancodes profile image
Shaan Alam

Glad you liked it 😊

Collapse
 
sagnik403 profile image
Sagnik sarkar

Not looking so good. It is highly contrasted. W
If we use this in night then it will be harmful for our eyes. But obviously great try 👍

Collapse
 
bikasv profile image
Bikas Vaibhav

Some comments may only be visible to logged-in visitors. Sign in to view all comments.