DEV Community

loading...
Cover image for I created a VS Code theme πŸ”₯️

I created a VS Code theme πŸ”₯️

shaan71845 profile image Shaan Alam ・2 min read

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

Discussion (15)

pic
Editor guide
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
shaan71845 profile image
Shaan Alam Author

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

Collapse
vikkrantxx7 profile image
Vikrant Sharma

At least you tried πŸ₯³

Collapse
shaan71845 profile image
Shaan Alam Author

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
shaan71845 profile image
Shaan Alam Author

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
shaan71845 profile image
Shaan Alam Author

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
devinthemtn profile image
devinthemtn

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

Collapse
shaan71845 profile image
Shaan Alam Author

Glad you liked it 😊

Collapse
mh_shifat profile image
5hfT

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

Collapse
shaan71845 profile image
Shaan Alam Author

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
ellram profile image
Elle

Really cool color themes, fun inspiration:)

Collapse
shaan71845 profile image
Shaan Alam Author

Thanks 😊