How to make your own VS Code theme!

[Music] everyone wants one but if you've ever tried making your own you'd know how incredibly difficult it is to find a simple way to make a theme sure you could download a custom theme but how do you get one to perfectly match your personality or coding mood this is a complete step-by-step tutorial that will show you how to create your own theme and publish it on the vs code marketplace i'll share my special tips that'll help speed up the process for you and i'll show you my new theme color generator that makes picking colors a breeze by the way this video and my own theme coder coderdark are brought to you by my github sponsors who kept the tea flowing day and night so i could finish this tutorial so thank you and if you'd like to enable my caffeine addiction links are below let's get into it [Music] to start off how do colors and themes work in vs code well did you know that you can customize the colors in your vs code without needing a theme you can all avs code settings are stored in a json file you can open it by hitting ctrl shift p to open the command palette and typing in open settings just make sure you're not opening default settings because that's something totally different once you're in the settings file add an array item called workbench color customizations in this array you can specify what properties you want to customize and the color that you want for example if i add an item called tab active background and set the property to red when i save the file you can see that the tab color has changed to red now this is a very simple example there are literally hundreds of colors that you can customize this is simultaneously thrilling and terrifying so how can we make sense of all these color properties let's break it down you can roughly divide the color properties for vs code into two categories application colors which are the colors of the vs code editor program itself for example the title bars tabs menus scroll bars and general text colors among other things and then there are token colors for syntax highlighting in your code when you set colors for properties you need to use an rgb format with an optional alpha or opacity channel in our example earlier we set the tab active background color to red if you want to use a semi-transparent color you can use the eight digit format where the last two digits are the alpha value like the other hex codes it can range from zero zero for zero percent opacity to seven f for fifty percent and ff for a hundred these semi-transparent colors are important for highlighting and hover states so that you can still read the text under the color overlay okay so that's a general overview of how colors in vs code are set but how do themes themselves work if you're anything like me the first thing you did after installing vs code was to look for a fancy schmancy theme because if it doesn't look cool i don't want to code there are so many color themes out there but how do they really work under the hood themes on the vs code marketplace are considered extensions so the monokai pro theme is in many ways treated the same as other extensions like live server or prettier when you install any extension it gets saved into a vs code backslash extensions folder on your computer and if we look at one of these folders we can see that the nuts and bolts of the theme is essentially a json file with all the color properties set to whatever the author wanted okay now that we kind of know how colors and themes work in vs code how do you go about actually creating your own theme well buckle up and grab a cup of coffee because it's going to be a wild ride through the confusing land of microsoft on a high level here are the steps to creating and publishing your vs code theme first you have to create your theme files using the visual studio code extension generator it's a command line tool that will create starter files for your theme then in your files you'll set all the custom colors for the various properties just the way you want once your theme files are all done the last step is to set up an account on microsoft azure and publish the theme on the visual studio marketplace to create our theme files we're going to use a command line tool called the yo code extension generator it uses yeoman to generate starter theme files and link it to a github repository the github part is optional but i do recommend it because it'll make maintaining your theme a lot easier down the road open up a terminal window making sure to use one that can run git commands like bash or windows powershell i personally like using the integrated terminal in vs code navigate to your main github folder and run npm install g yo generator code this will globally install the yocode plugin once it's installed run yo code to run the yokode extension generator you'll see this little ascii art man asking you some questions about your theme use the arrow and enter keys to select new color theme no start fresh give your theme a name description and a public name choose a base theme dark light or high contrast i'm using dark and select y to initialize a git repository if everything goes well you'll see a bunch of files get created now open that theme folder in vs code and let's get started let's take a look at what we have so far in your themes folder open the json file there in this file you can see the name of your theme the type of theme it is and two sets of colors the colors section contains the vs code application colors that we mentioned earlier then the token colors section contains the colors for syntax highlighting these colors follow the text mate grammar system which uses a collection of regular expressions to target different types of code elements you can see that these element names are a bit more complicated than the application colors these names or scopes are a way to target specific elements in the code and they follow a css like system of descendants and specificity looking at this really long json file you might feel a bit overwhelmed having to go through every single color property and scope and how the heck are you going to be able to see what each property actually controls in vs code well this takes us to the first trick that i'm going to show you that will help you stop banging your head on the keyboard and setting your monitor on fire that trick is the theme debugger with your theme folder open in vs code you can run it to debug your theme do this by hitting f5 or run start debugging up in the menu when you run the debugger vs code will pop open a new window with the theme customizations from your json file right now it's loading the default dark theme that we selected from the yo code generator in the debugging window you can open files and folders to see exactly how your theme will look in the real world then if you make any changes in your theme json file and save you'll see it immediately take effect at this point you may be saying to yourself that's all well and good but how do i know what these properties and scopes map to in the theme what even is keyword other substitution and that brings us to the second trick that will help speed up this whole horrible process the tokens and scopes inspector to run the inspector in your debugging window hit ctrl shift p for the command palette search for inspect editor tokens and scopes and select it now in that file you can click on an element that you want to change the color for and the properties that control it will pop up in a window the title at the top will display the actual text in the file that's being styled then in the first panel it gives you information about the property below that will tell you the text mate scopes that can be used to target the styles for that text and at the bottom it'll tell you the actual scope name that is being used to target the text in your theme i wish that it would also give you a line number for where the property is in your theme json file but you can still do a manual search for the property name yourself in this case we're going back to our theme files searching for entity other attribute name class and changing the color to red now when we save and go back we can see that it's changed in our debugger keep in mind the textmate scopes only cover the syntax highlighting in your code files and what about the vs code application colors like sidebar and menus unfortunately there is no inspector tool for that but you can look up the vs code theme color reference as a starting point we'll link to this in the description let's say we want to customize the window active border in our theme files in the colors section if you start typing a new string vs code has an autocomplete feature that will give you all the possible properties you could add to that section so if we start typing window it'll show us our options and we can select window active border if i'm not positive what this property name controls i'll often set it to red which is the default this will make it a little easier to identify what i've changed back in the debugging window in this case we can clearly see the red border in our active window now you can probably tell that going one by one through all the properties and customizing them individually is going to take a very long time luckily for you i have a special tool that will make assigning colors in your theme way faster i was able to use this to create a theme in no joke 5 minutes the secret is i built an online tool that will generate the colors for your theme all you have to do is input the colors into the tool and hit the button and it will spit out a json file that you can copy and paste right into your theme files if you're not sure what colors to come up with for your theme i'm right there with you but you can find inspiration at places like coolers.co you can explore popular palettes and also use their generator tool to find the right colors another method you can use is to find a photo or illustration with the color scheme you like and get the colors from there this site hexcolor.co is pretty cool because you'll upload an image and it'll sample a range of colors from the image for you links to my generator tool and the other websites i mentioned are all down in the description keep in mind even if you do use my generator tool it's just a starting point you'll probably want to make some tweaks to get things just right but it will get you much closer to the finish line much more quickly once you're done with all the color customizations you're almost there but getting it out into the wild is not as easy as you might think or hope the basic steps are sign up with microsoft azure devops create an organization register your theme publish it see it in all its glory on the marketplace and humblebrag about it on twitter you might be asking yourself as i did what the heck is azure devops and why do we have to use it well as you probably know vs code is created and maintained by microsoft so they use the same login system for their azure cloud computing services and vs code extensions yeah i don't know either anywho to register go to the azure devops website at dev.azure.com and click the start free button in the sign in page type in the email you want to use and click on the no account create one link to create a new account once you've registered you should get redirected to your azure devops dashboard page at dev.azure.com your organization name now the next step is to create a personal access token to authenticate you when you're publishing your extension click on the user settings icon in the top right next to your avatar and select personal access tokens click new token to create new token and give it a name it can be anything you want then in the organization drop down select all accessible organizations and for expiration select custom defined which will default to one year from now which is the maximum length of time then at the bottom click show all scopes and scroll down to marketplace in marketplace check the manage checkbox this will give you all the permissions you need to publish and manage your theme lastly click the create button and you will be given a personal access token copy it and put it in a safe place as you will need this to publish your theme and of course don't show to anyone you're almost there there's only one more thing to set up creating a publisher this will be the publisher name attached to your theme when it gets added to the marketplace navigate to marketplace.visualstudio.com manage and you should see a create publisher page the only required field is filling in the name and id of the publisher but you're welcome to add whatever other info you want now before you hit the create button make sure that pop-up blockers are disabled on this page as you'll likely get prompted to do a captcha and if it's blocked the form will silently fail and nothing will happen this may or may not have happened to me multiple times microsoft if all goes well you should get redirected to the manage publishers and extensions page leave this page open as we will be returning to it later now that we have our publisher created we can go back to our vs code theme files and prep everything for publishing in the theme files open the package.json file as we need to add info about it to our theme the most important part is making sure the publisher field contains the publisher id that you just created note that this isn't the name but the id which shouldn't have any spaces this will link your extension files to your publisher and once you've pushed your theme files to your github add in the repository url to connect that as well if you want your theme to be searchable on the marketplace add a keywords field with different words or phrases that describe your theme and lastly make sure that you've changed your readme file from the default as you won't be allowed to publish the theme until it has been updated once your theme files are all done you will need to package and then publish your theme we'll be doing both from the command line on your command line install the vs code extension plugin by running npm install g vsce next you will need to log in to your publisher account using that vs code extension type in vsce login and then your publisher id when you are prompted to input the personal access token copy and paste that from wherever you had it and press enter then you can package up your theme by running vsce package the plugin will create a vsix file in your theme's root directory this file contains all the info about your theme for the marketplace finally run vsce publish to publish your extension if it all goes well it'll give you a success message that your package was published now go back to the manage publishers and extensions page and you should see your theme listed in the extensions tab it may say verifying for a short while but it should switch to verified status within a couple minutes or so now let's check out your theme in the extension dashboard click the three dots icon next to your extension name then select view extension to see it on the marketplace once you can see it up there you should be able to install it on vs code on your own computer you might have to close and reopen vs code in order to get it to show up in the extensions menu in the extensions menu type in the name of your theme and hopefully you'll see it hit that install button select the theme and now you're using your actual live theme now even after you've published your theme you'll probably want to make changes to it over time you know to get all colors just right to update your theme you'll follow pretty much the same process you did before to package and publish it once you've made all the updates in your theme files make sure your changes have been committed and pushed to your theme's github repository then in your command line navigate to your theme files and make sure that you are logged in by running the vse login command with your publisher id again paste in your personal access token as the password and once you're logged in run vsce publish and either patch minor or major depending on the type of update you are publishing a patch is a small fix miner is for larger changes and major is for really big changes so that's it for how to make your very own vs code theme i would love to see what color combos you come up with so feel free to tweet a screenshot of your theme at me the coder coder with the hashtag mycooltheme and as always thanks for watching and we'll see you in the next one you