Creating your own theme for Visual Studio Code

Visual Studio Code is a new editor for Microsoft developers.

Of course, at the moment it is inferior in terms of the number of supported functions to the widespread Sublime Text, but at the same time it is “gaining momentum”. This is confirmed by the already large enough set of extensions in the Visual Studio Marketplace .
')
In principle, for those who have previously tried the Sublime Text editor, it will be easy to find a lot in common between these products both in visual design and in the set of basic features.

In a very recent article on Habrahabr, the author points out that

Unfortunately, VS Code does not yet support interface themes. But there are a lot of cool syntax highlighting themes. Below are some of them.

In addition to ready-made themes, you can create your own ones that fully meet your requirements.

Maybe I will be unoriginal, but I want to share information about the online editor , which allows you to create themes that are supported in VS Code.

In the editor, you can change anything (font, color, highlighting keywords, etc.). There are ready-made topics. You can also create your own based on the default base. After the new theme is ready, you just need to save it to your computer.

Setting your theme in VS Code

1. Go to the% USER_PROFILE% \. Vscode \ extensions directory;
2. Create a new directory with the name of our theme;
3. Create a package.json file in our theme directory with the following contents:

{ "name": "theme-name", //  "version": "0.0.1", "engines": { "vscode": ">=0.9.0-pre.1" }, "publisher": "Your Name", //   "contributes": { "themes": [ { "label": "Theme label", "uiTheme": "vs-dark", // use "vs" to select the light UI theme "path": "./themes/YourTheme_Theme.tmTheme" //      } ] } } 

4. Create the themes directory and put our new theme in it.

Is done. Now in the menu “File” - “Preferences” - “Color Theme” you can choose and apply your theme.