Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Install a Custom VSCode Theme and Why?

    Ahmad Awais ⚑Ahmad Awais ⚑

    The default theme that comes with Visual Studio Code is good enough. But if you are a Power User like me, you would want to change it. You would want to hack your editor why not first have a good custom built VSCode theme to enjoy a better dev-experience. Also, in this video, I review (shameless plug) my own custom theme called πŸ¦„ Shades of Purple which has been download 1,302,726 times with millions of developers already using it.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 0:00 The default theme that comes with Visual Studio Code is good enough, but if you are a power user like me, you'd want to change it. You'd want to hack it around, have some sort of a custom-built work around it.

    0:10 You're in luck in today because I have just released this new theme called Shades of Purple. Let's go ahead and install it, and then I'll explain to you why I really like it.

    0:18 I'm going to press command shift x to go to my extensions. Remove everything there. Search for Shades of Purple. There you have it. Let's click install.

    0:28 I happen to be a big fan of purple color. I think purple can be genius. It looks like it's already installed. Let's click reload.

    0:36 What should have happened here is that Visual Studio Code should have applied the theme that I just recently installed. It looks like we have to actually go to this gear icon, click on color theme, select the Shades of Purple as our default. VoilΓ , our theme is there.

    0:51 I have done a lot of things with this Visual Studio Code theme called Shades of Purple. For example, one thing that I can show you right off the bat is the markdown syntax.

    1:00 While it is really easy to learn markdown syntax, you can do it in a week. I don't want the syntax to be prominent to me, because I do a lot of my writings in my Visual Studio Code and I want the syntax to be as hidden as it could be.

    1:16 For example, if you see that I'm trying to bold this word, the syntax around it is a hidden syntax. It is more prominent when you're writing code and you have this backticks with the name of a language around it. They don't really look really well in other themes. What I have done is, I have chosen a dull color for these punctuations for markdown.

    1:35 It looks really well. Only the things that really matter stand out. For example, let's go to the old theme we had. I think it was the Dark Visual Studio. Take a look at this.

    1:45 Now, this looks messy. There's a lot of syntax which shouldn't be meddling around with our code. As soon as we move away from this theme to Shades of Purple, we can see that syntax that does not matter to our writing goes away.

    1:59 While it's really minimal, I think most of the developers have looked at it as a welcoming change. There are a lot of things. The CSS syntax is pretty cool here. Borrowed a lot of syntax here from the famous Cobalt themes and the Palenight themes.

    2:15 I customized how React in JavaScript looks in this theme and also PHP because I am, of course, our developer. There you have it, folks. Have at it. Go ahead to your extensions area, search for Shades of Purple, and install this theme, and then select it from here.