Creating a Visual Studio Code Theme - EASILY!

Key Takeaways

[Music] what is up everybody gary simon here so the past several years people have been asking me when am i going to make a visual studio code theme um so this morning i actually stumble something across a new tool or it's new to me at least and it allows you to use this graphical user interface in order to generate a theme so you don't have to do it all within visual studio code um so you click you go here it's basically code.1 i'll link in the youtube description create a new theme and you're going to see me create a theme um based on just you know my personal preference towards colors and stuff and most of it is going to be sped up and time lapse like it took me like 47 minutes total and then you're actually going to see it on my visual studio code at the end and you can install it as well by searching for the the um the color scheme or theme of design course um so maybe i'll link that as well in the description so anyhow hopefully you enjoy this if you do make sure to subscribe and let's get started now wait one moment you're about to watch me customize my code editor now in a code editor you might be a front-end developer or aspiring now if you're not very good at front-end development you should definitely check out scrimba.com their front-end developer career path they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all righty so here we are i i noticed by the way when i was setting up these windows right here um i have i always have a ton of icons on my desktop and i i've been taking pictures and stuff of my new snake i gotta show you the new snake she is a beast so this is my closure i did a video about it uh like a month ago um but i i took my burmese python she's in a smaller enclosure because she's so small i made a new one for her and i got this girl she's a reticulated python she is seriously about 17 to 18 feet long i she is massive and i she is just awesome look at this snake she's 120 pounds almost anyhow let's get to this uh we're going to go ahead and i'm just going to start with a new thing um light or dark well we're going to choose dark that's kind of a weird ui pattern how it just expands the button i thought that was strange whatever um let's go ahead so as you can see you know there's just so many different creating a vis a vs code theme is is difficult because there's so many different elements that you have to account for um i haven't created one here yet the only thing i did do is just to make sure it works is change a couple colors beforehand for a couple seconds and it does work um and so we're just going to go through these and it it's tough i you got to start with you know a base color and i have this notepad document open here um so that i can track some of my primary colors that i'm going to use because i'm not sure if this app tracks like a palette or whatever based on what you used already um so i'm just going to start you know um getting here like like or just putting some some backgrounds like like what is it like this background this background this background and this background and this background i think once you get those then we'll start to um everything else should fall into place a lot easier so um let's go here not to hide us title bar sidebar um we'll do the sidebar so we click on it so we have a little color picker here and you can see how it ends up changing um you know i personally love dark desaturated blues for some reason kind of like slate uh so to speak so um i'm gonna try to come out here and try to just get an idea for a very specific i think this might be okay i'm gonna go right there so i'm gonna take this color code and i'm going to put sidebar vg right there so now i have that and i can quickly access it access it from there on um so the next one i that we'll worry about is like what is status bar background okay so that's down here we'll worry about that after um the title bar uh which one is that so active active inactive menu background okay okay it's showing some of these it does show you what is being highlighted um let's not worry about that one um what i really want is the background of this like where's that at see i'm hovering over this trying to see if anything's changing and it's not unfortunately so let's just move this around okay so we have this background right here so what i'll do is paste in that color right here and then we can either choose to keep it the same color which i don't think i'm going to do or just slightly change it a little bit do we want to go darker like that or do we want to go lighter so when it comes to thinking about colors you want to emphasize generally speaking um what's most important i based on uh your how much it it it it catches your eye so lighter things will catch your eye generally so this over here this bar i think it might make sense to take it a little bit darker than the original color i'm not sure i think i kind of like right around there so we'll just do that for now so this is called um i'm going to call it the icon uh left icon bar there we go so there we go we have that one all right next up i let's see here title bar buttons input panel terminal text tabs breadcrumbs like i just want to know how to change this background right here unreal uh notifications let's see here let's change this and see what happens here oh it's just like this little yeah so you can't edit undo here so now i'm stuck with whatever that was let's just use uh maybe this color okay that's fine all right so um let's see here activity bar sidebar status bar title bar buttons but where the hell would it be oh is this this is it okay i didn't realize it's up in that tab right there all right so let's paste in this right here now we have this sort of weird thing uh this will have its own color as well um let's see here let's [Music] um let's let's just uh for now leave it right there at the same color and i'm going to change um this area what is this see what would be very helpful is if you hover it over this it's going to tell you exactly what selection it is um look at these look at all these i'm not sure if we're gonna be able to get through all of these and create a custom area because what what i'm trying to find to change right now is this section right here uh this little background editor line number foreground i think that might be it i editor cursor background what is that so this is completely black and i see nothing changes okay unreal let's keep on going here foreground [Music] so [Applause] [Music] do [Music] [Applause] [Music] all right and here it is i was able to publish it and by the way i have to say the the process of publishing a theme is extremely convoluted and quite complex it just seems like there's so many steps you have to install multiple uh cli tools uh create accounts on microsoft azure it's just insane anyway i got it up and running and here it is so you can actually go to the extensions here and you can search for design course and here it is you'll be able to use it um so let's see what this looks like in an actual project so let me go to file open folder um let's just use one of the projects that i did here um don't save wait what oh maybe i didn't actually like activate it let's do that again um let's see set color theme there we go okay wait what what's that color theme wait what are you doing set color theme are you gonna go back there we go okay so yeah this is the actual color theme that i created um not too sure i like the colors here i mean it could work um i'm not sure about this yellowish color but um maybe i'll go back and edit this and republish it or whatever to colors that i like in terms of the syntax settings but yeah that's basically how you do it and by the way you know that convoluted process as long as you follow the there's a little guide on that site um publishing theme let's see if i can find it publish theme yeah go here um how do i publish my theme just follow these steps and you'll get through it it'll be tricky in some spots and you'll be confused if it's the first time you did it like myself um but yes that is basically it very fun all right awesome stuff hopefully you enjoyed that if you did make sure to subscribe let me know what you think in the comments and i'll see you real soon goodbye [Music] you