VS Code customizes the code color, just read this article
As we all know, VS Code is a development tool with a lot of room for customization. The required functions are all in the plug-in, which is very convenient, but everyone has different preferences for the theme. Even if you find many theme extensions in the extension plug-in , It is also difficult to find a theme that fully meets your preferences, so is there a way to define the theme of VS Code yourself? The answer is of course! Read on to create your own theme.
What you need to know before you start
In addition to the default settings of VS Code, almost all other settings that need to be customized can be completed by editing the setting.json file. The same is true for custom themes. The method to open the setting.json file is: Click the [Settings button in the lower left corner of the interface ] → Click [Settings] and find the following icon near the close button in the upper right corner, click to open the setting.json file, and the rest of the operations are completed in it. 
In addition, our custom themes are generally based on the default theme to make some modifications, that is, if the default theme does not meet your preferences, you can modify it. There are too many settings that need to be set up to create a new theme, and it is not realistic. Then continue Get down and set it up.
setup steps
1. Add font setting code block
Open your setting.json file, don't care what's in it, inoutermost layerEnter inside the braces
"editor.tokenColorCustomizations":{
}
There will be a code prompt during the input process, and if you directly select the prompt, it will be automatically filled in for you.Don't forget to add a comma at the end of the previous code block, otherwise an error will be reported. Point the mouse to this code, and a prompt will be given. You can see that this code block is used to modify the syntax color of the theme editor.
2. Find the currently used theme
As mentioned earlier, modifying the color is actually a targeted modification on the original theme, and the next operation is to operate on the theme you are currently using. The default black theme is [Dark + Default Dark+] If you don’t know what you are using Which theme you want, search for [Theme] in [Settings], and check the current theme in the [Workbench: Color Theme] column.
3. Modifications for this topic
Go back to the setting.json file, infont setting code block(that is, in the curly brackets behind the code just written) enterEnglish quotation marks, taking my default dark theme as an example, select [Default Dark+] in the code prompt given.
Continue to enter English quotation marks in the curly brackets behind [Default Dark+], and select all the prompts given, and also pay attention to adding a comma after each statement, as shown in the figure below.
Move the mouse over each code, there will be a prompt telling you which part of the line is to set the color. Point the mouse to the color code at the back, and a color selector will pop up, just choose your favorite color according to your needs.
I encountered a bug here, that is, no matter which color setting you point the mouse at, the color at the first line [comments] is modified. In desperation, I commented out all the codes of the color setting, and then uncommented them line by line. Modify to solve the problem.
Here I will write the corresponding area of each line
"comments": comment color
"functions": function/method definition and reference color
"keywords": keyword color, such as new, if, else, try, etc.
"numbers": numbers The color of
"strings": the color of the string
"types": the color of the type definition and reference
"variables": the color of the variable
"textMateRules": other specific color settings
The [textMateRules] here will be mentioned later.
Editing of the textMateRules code block
Let me put my settings here first, and I will explain them later based on this
"textMateRules": [
{
"scope": "keyword.control",//if ,else, try 等控制符
"settings": {
"foreground": "#C586C0"
}
},
{
"scope": "keyword.operator",//算数符
"settings": {
"foreground": "#f07d3b"
}
},
{
"scope": "storage.modifier",//修饰语
"settings": {
"foreground": "#f09090"
}
},
{
"scope": "entity.name.type.class",//类名
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "storage.type.primitive.java",//int和其他啥啥，忘记了
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "entity.name.type.interface",//接口
"settings": {
"foreground": "#c0526a"
}
},
{
"scope": "entity.name.namespace",//导入部分
"settings": {
"foreground": "#74817c"
}
},
{
"scope": "entity.name.tag",//html标签
"settings": {
"foreground": "#d35c5c"
}
}
]
Each block here represents a specific code color setting, which means that the application range of the color setting is more precise.
The "scope" in the code indicates the scope of application of the "settings" below. I have marked the comments used in the above code. If you need to modify it, just move it there.
If there is no part you are looking for, you can open your project code page, press [F1], search for [developer:inspect editor tokens and scopes] to open the token scope viewer, and then click the place where you want to modify the color in the code , check the scope at [foreground], copy and paste it into the quotation marks after "scope" in [settings.json], and then apply the color setting to the corresponding position.
Other theme color settings for the editor
If you just want to change the display color of the code, it is enough to read the above tutorial. The following tutorial is how to modify the theme color of the entire editor. The code block title of this setting is
"workbench.colorCustomizations": {
}
You also need to write the name of the current theme first. There are many things that can be set in it. You can enter "" and select the given code prompt first, and then point the mouse to it to see the prompt to determine where the specific setting is. Changed the default foreground color of the editor, and the rest can be experienced by yourself.
Here is the setting tutorial of the official document. If my blog does not solve your problem, you can take a look. It is written in great detail.