Create your Custom VSCode Theme (Own Visual Studio Code Theme in a Few Mins)

Key Takeaways

hey friends welcome to one little coder in this video we are going to see how to create your own custom vs code extension for theme so you are going to learn how to create your own custom vs code theme vs code stands for microsoft visual studio code it is one of the most popular ides so we have got a couple of videos about vs code how you can use jupyter notebook on vs code so in this particular video we are going to see how you yourself can create your custom theme so that um you can start publishing it you can share it with your friends whatever you want to do you can do it so let's start with uh how we are going to do that so first of all what you need is you need uh something called the yeoman generator so this is an open source project that was put together by microsoft for you to create a couple of extensions that is required for uh like vs code or any other product so first of all you need to install that please make sure that you have got already node.js and npm installed on your machine because for you to do this thing you first need node.js and npm installed so copy this code go to your terminal or shell and then try to install it so as you can see it is currently getting installed so while it is getting installed we can go see uh what is it doing so you can see that uh it asks you a bunch of questions like do you need a new extension do you need a new javascript extension or typescript extension or you need a color theme or you need a language supporter you need a code snippet so after you do that you just have to directly go inside the project folder and you are going to have that basic template ready for you and if you are building an extension in this case what we are doing so you have to just open launch.json and then you have to just run the extension so now you can see that it has been successfully installed in my case so let me clear my terminal and then let me go and see how to run that so first you have to say your code and then it's going to ask you a bunch of things okay welcome to the visual studio code uh and it is asking you what do we need so we need to create a new color theme so let's click color theme so you can control it using mouse key so i'm just using my down arrow and then clicking this color theme so it's asking you do you want to start fresh you want to start importing something or maybe you want to use some existing text made color theme so what do you want to do so in our case i want to start fresh so let's click start fresh and what is the name of your theme so let's call it one little coder uh just for the sake of the popular after the channel so one little coder okay description this is an attempt to learn to create a new theme okay and what is the name of the theme that is shown to your user so you can actually see uh um name is i'll just put one little coder okay so do you want dark light uh we'll click dark so now at this point you can see that it has been created so it is telling you you can directly go inside cd one little coder and then you can try to open it with your vs code so code dot let me just clear the screen for you to see code dot and then it's going to open it in vs code so currently our vs code looks like this very bright theme so what we want to do is we want to edit it so you can just go here and then edit whatever you want so you just keep your mouse on it and then it will give you the option what you want to edit so let's see um let's go with a very weird background so let's say in this case this is the background that we want okay and uh front is fine the activity bar maybe let's say we want to go with this okay so we have uh quite subtle so this is our this is going to be our background so first save this once you save this go to launcher launch.json so once you go to launch.json so you can click this this particular extension part and then say either you can do that otherwise you can do for f5 um it will itself open it in the development environment but if you do not want to do that so you can just simply go here and then run the extension so once you run the extension you would see this thing but if you close the window and you see uh the theme so you don't see one little coder yet so it is not going to show you the teammate so first let's actually see the theme so you have this very bright um it's it's actually hurting my eyes so it's that bright so let's go ahead and then try to make it slightly better uh so let's say okay i want to make it slightly light and my foreground i want to make let's say this color okay so let's see how it looks save it and uh let's again click f5 and then it's opening it's opening when you write import pandas as pd okay it's it's decent it's not bad so let's uh let's settle with this thing uh let's close it for now so this looks good so now once again save it after you save it uh you can just basically close this uh or let's just keep it at least for this moment so now what you have to do is now your theme this theme is settled so now uh to make this theme available whenever you open vs code is so there are a couple of ways either you can just go to the vs code marketplace and publish it that is not what we are going to look in this particular video so let's assume that you want to just share the source code with your friends so that um you can upload it on github or you can put it anywhere so assume that you have the project folder so the project folder here is called one little coder so assume that you have the project folder so what you have to do is you have to put it in a place place where vs code slash extensions so if you are using mac this is your extension if you are using windows you can actually check it so it's basically this is the place where you have to put your vs code extension uh the so the extension that you just built so that the extension is loaded every time vs code is open so what we are going to do now is we are going to simply say copy copy my folder directory from one little coder to vs code it's successfully copied you can see ls it's there only encoder is there so now go back and click new window when you click new window you can actually see uh command shift p uh it will open on this project window so click color theme and you can see one little code you can see one little quarter under dark theme because we selected it as dark theme so you can see it as dark theme so click doc and here is your dark theme import pandas as pd and oops this okay and whatever you want to do print i love this tutorial whatever so basically on in this video you have successfully learned how to create a vs code extension not just to create vs code extension but you also learned how to quickly keep it in your startup folder kind of a startup folder for your vs code so that every time you start a vs code uh it opens so in fact i can just simply show you completely closing everything opening vs code and uh once it opens you can see that it has got the theme that we just use so go to color theme and see the theme on little coder it is there so um it is a very simple way to pick up the color scheming that you like so you don't have to really you know spend your time googling around understanding which is the theme that you like most or whatever you want to use it so based on the color combination that you like so i prefer some something you know that is bright uh towards my eyes whenever i feel sleepy and i have to code but um it's up to you but this is a very easy way for you to create a vs code theme without any problem at all so you just saw that in a couple of minutes we successfully created a vs code theme so if you like this video please like like actual like thumbs up and then subscribe to our channel share the word and uh if you have any comments please let me know in the comment section and until next video i will see you take care of yourself bye