It is a painful thing to discover after putting in the hours to select a theme that works for one language, for it to not work for another entirely. I suggest you make yourself a folder of code snippets from a wide range of different languages so that you can see how your theming looks in a range of scenarios. You can now select tokens in your editor and see their scopes.
Visual studio code theme display windows#
To do this press ctrl + shift + p on windows or cmd + shift + p on MacOS and type in Developer: Inspect Editor Tokens and Scopes. In this mode you can also use a tool to help you identify what textmate scope is responsible for a certain colour in your editor. This will launch a new window with your theme. Open the project in VS Code and press F5 if on windows or fn + F5 if on MacOS. Testing your theme is a relatively simple process. This will make it easier for you to identify whether your colours work together, and look the way you imagine them to.
Test! If you are unsure about your colours you can always test them out. An article that I read when developing my theme emphasised this point and you can find it here. This will help you pick colours that complement each other and help you make a beautiful theme. There is no point developing a theme that is ultimately unusable because the colours are too similar and don’t provide enough contrast. Make it easy to readįirst and foremost, your text editor needs to be easy to read. Here are some tips I recommend you follow: 1. This part is largely up to you and is the most time consuming part of the theme development process. Microsoft have a really helpful article which covers off on all of the parts of VS Code you can change with a theme extension. It is the colour of buttons, menu selections and so on. Workbench colours are all the other colours. It is based off of an older text editor known as Textmate, which used scopes to define which parts of a language’s syntax would be coloured. These are the colours you change if you want to alter your syntax highlighting. Broadly this can be broken up into two main categories editor colours and workbench colours.Įditor colours are all the colours in the text editor portion of VS Code. This is where you will decide on the colours you will use in your theme. using your arrow keys you can make a selection, we want a new color theme: This will start the Visual Studio Code Extension generator. Next simply open a terminal and navigate to the directory you want your theme. With those things installed we can get going. To start, you need to have a few things installed: Whilst many are happy to use an off the shelf theme, in making one for Galah Cyber, I began a very interesting process of customising and fine tuning a theme to fit ‘the look’ of Galah but also be a theme that people actually want to use. It also like many other text editors allows you to make custom ‘themes’ for it of which VS Code users have made thousands. One of the many reasons for that is the sheer amount of customisability it offers. Visual Studio Code has become prolific in the tech community as a text editor of choice for many.
0 kommentar(er)
