Read if you want do to deep customisations
As others have stated, you must override the editor.tokenColorCustomizations or the workbench.colorCustomizations setting in the settings.json file. Here you can choose a base theme, like Abyss, and only override the things you want to change. You can easily things like the function, string colours, etc. However, you'll be limited to only a few items.
E.g. for workbench.colorCustomizations
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.background": "#130e293f",
}
}
E.g. for editor.tokenColorCustomizations:
"editor.tokenColorCustomizations": {
"[Abyss]": {
"functions": "#FF0000",
"strings": "#FF0000"
}
}
// Don't do this, looks horrible.
Deep customisations like changing the colour of the var keyword will require you to provide the override values under the textMateRules key.
E.g. below:
"editor.tokenColorCustomizations": {
"[Abyss]": {
"textMateRules": [
{
"scope": "keyword.operator",
"settings": {
"foreground": "#FFFFFF"
}
},
{
"scope": "keyword.var",
"settings": {
"foreground": "#2871bb",
"fontStyle": "bold"
}
}
]
}
}
You can also override globally across themes:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italics (=Pacifico)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
//"support.class.builtin.js", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
"storage.type.function.js", // function keyword
"storage.type.js", // Variable declarations
"keyword.control.import.js", // Imports
"keyword.control.from.js", // From-Keyword
//"entity.name.type.js", // new … Expression
"keyword.control.flow.js", // await
"keyword.control.conditional.js", // if
"keyword.control.loop.js", // for
"keyword.operator.new.js", // new
],
"settings": {
"fontStyle": "italic"
}
}
]
}
More details here: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
