Vscode Theme

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.

It’s horrific but it works for me.

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.

editor.tocenColorCustomizations

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”

Developer: Inspect Editor 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.

vscode token scope

I think that should cover it for now 🙂

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.