Creating your own theme in VS Code?

Question

Visual Studio Code

Greetings!
- When creating a theme for VS Code, I found the official documentation on styling the main elements of the editor (windows, tabs, etc.).
- The next step is to set the colors for the code itself (variable, keyword, string, operator, etc.). I climbed into already created topics and found something like this post format:

"scope": [
  "keyword",
  "storage.modifier",
  "storage.type",
  "storage.control.clojure",
  "entity.name.function.clojure",
  "support.function.node",
  "support.type.property-name.json",
  "punctuation.separator.key-value",
  "punctuation.definition.template-expression"
],
"settings": {
  "foreground": "#d73a49"
}

Questions:
1. In the code example, everything is clear, there is a "element name" (keyword, storage.modifier, etc.) and their styles (foreground). But where can I see the entire list of "element names" (documentation)?
2. How to set the style for elements, only for a certain type of PL? For example, make "string" green only in JS...
Thank you!

Answer 1

Check out the following sections of the documentation:
About topics
how to find out the name of the scope , which contains what needs to be colored.
An example of how to color specifically the this word in js. Let's add the following code to settings.json:

"editor.tokenColorCustomizations": {

​ ​ ​ "textMateRules": [

​ ​ ​ ​ ​ {

​ ​ ​ ​ ​ ​ ​ "scope": "variable.language.this.js",

​ ​ ​ ​ ​ ​ ​ "settings": {

​ ​ ​ ​ ​ ​ ​ ​ ​ "foreground": "#FF0000",

​ ​ ​ ​ ​ ​ ​ ​ ​ "fontStyle": "bold underline"

​ ​ ​ ​ ​ ​ ​ }

​ ​ ​ ​ ​ }

​ ​ ​ ]

​ }

And we get a red bold underlined this.

Answer 2

In the templates folder, find your template, and there header.php.

Answer 3

Alternatively, you can do this:

a[href="/login/registration/"] {
    display: none;
}

Answer 4

The third option is to log in as an admin and there will be a switch "editing mode" on the top right. The thing is not very fast and convenient, but it allows you to determine exactly where the file you are looking for lies and immediately call the panel to change it.