This isn’t really a post about what them or how to comprehensively style VScode to create a new theme. It’s because I like to make my VScode look like the 80s has thrown up all over it. It took a bit of time to find this info so I thought I would put it all in one place. Personally I never found a theme that suited me so I was looking for how to change default colours myself.
Below is an example of the high-contrast (ish) colour scheme I prefer to use.
tokenColorCustomizations and settings.json
VScode has a very nice settings.json that allows you to customise everything in one place. If you haven’t had a look just ctrl + shift + p and type settings and the file should appear under the command box
To be able to style the editor to your liking you will be changing this block of json. I think you can infer quite clearly what is going on here. You have the scope which has a commented list of properties and settings that has a commented list of text styles in key value pairs.
The problem I faced was knowing the names of the properties I needed to change. To find these you need to go to the command input, look for and click “Developer: Inspect Tokens and Scopes”
Now when you click on a word in the editor you should see what the propertie name for that element is. You will get an info box like the one below and you can see the property type here is “support.type.property-name” which you can now use in settings.json to update that elements style.
I think that should cover it for now 🙂