How to create an exclusive vs Code theme

1、color How it works .

Using shortcut keys Ctrl+Shift+P, Input Open settings, Choose not to default Of settings.json File Click ：

  Try adding the following configuration ：

  You can see tab.activeBackground This attribute renders the label background of the currently used file red .

Other relevant configuration references ：Visual Studio Code User and Workspace Settings 

There are hundreds of color schemes , This is both exciting and overwhelming .

2、color Classification of uses

These color attributes can be roughly divided into two categories ：

• Apply color （ The color of the program itself ） Include title block 、 tab 、 menu 、 Scroll bar 、 General text, etc .
• Symbol color （ Such as code highlighting ）.

3、* Use VS Code Extension generator

For our convenience, we will post it on VS Code Theme Market , Need its extension / Custom template file .

https://github.com/microsoft/vscode-generator-code

https://www.npmjs.com/package/generator-code

Refer to the above documents , Download dependency ：

npm install -g yo generator-code

  Global installation is convenient for future management .

Start the generator ：

yo code

  You need to answer a few necessary questions , Use the arrow keys +enter Choice you （ The blue words at the back are the filling contents ）.

Is answered , It will initialize a locally git Warehouse （ The file name is filled in by the third option ）.

4、 edit xxx--color-theme.json

Of course, open the file , You will find that there is 600 Come on , If you don't mind , Maybe it will be buried tomorrow . Do you want to change one by one ？ Here's a tip ！—— Use Theme Debugger To preview the color effect .

 

  It will pop up a new window , Once you make any changes , restart debugger You can see the effect .

There's another problem , How do we know that an attribute and scope are mapped to theme What about the place of ？（ The replacement of some keywords is unknown ）

The second skill is to open the command panel Token and Scopes Inspector, as follows ：

The mouse is hovering selector On , Pop up relevant information （ Languages , type , The foreground , Background color , Contrast , Text matching range ） 

 

An attribute has been added here , Find out Extension  Development Host The corresponding window border becomes the defined color . 

  It is a headache to go through the properties one by one and modify them , After all, no one wants to do something that takes time and effort .

Online theme color generator ：VS Code Theme Color Generator - Coder Coder

Design according to personal preferences , Finally, the defined theme json Just copy and paste the file . If you don't know how to choose colors , Recommend to  Coolors - The super fast color palettes generator! Look for inspiration , Or to Image to Colors Palette Generator - Extract Colors from Image Looking for the right visual experience .

5、 Release theme

1. Sign in Microsoft Azure DevOps.
2. Create an organization .
3. Register your theme extension .
4. Release
5. Brag about it on social media （·...·）

Fill in the relevant information , Click on Continue.

After verification , Direct to personal dashboard interface ：

 

Click next to the user's Avatar User settings, choice Personal access tokens（ Used for authentication ）.

Click on +New Token, Fill in the following information （ Baidu, if you don't understand it ）：

 

Don't forget to copy your token Oh ！！！

Navigate to https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true 

 

You just need to fill in Basic information that will do ：

 

  Click on Create（ It may need to be verified ）.

Go back to the topic extension file , perfect package.json The messages in the ：

And customization README.md The contents of the document .

everything , Only the last shiver .

Refer to the official website ： Publishing Extensions | Visual Studio Code ExtensionAPI

vsce,“Visual Studio Code Extensions” Abbreviation , Is a package for 、 Release and manage VS Code Extended command line tools .

  install vsce command ：

npm install -g vsce

  With Publisher Identity login ：

vsce login <YourPublisherName>

 

You are then asked to enter token To verify .

Pack it up as a xxx.vsix file （  The output is in the root directory ）：

vsce package

command ：

vsce publish

  Be accomplished ！！！

stay vscode market, Manager Publisher & Extensions View in ：

  stay marketplace.visualstudio Details shown in ：Menon Dark - Visual Studio Marketplace

 

 

The above is what I developed vscode First experience of theme expansion , If you like , Try this theme ！ 

Reference material ：

Creating a VS Code Theme | CSS-Tricks - CSS-Tricks 

https://www.youtube.com/watch?v=QCqWzb-9Sy8