How do I edit the colors in a pre-existing VS Code theme? - visual-studio-code

Question

I absolutely love the "Solarized Dark" theme, but how do I change the colors?
As you can see in this image, both "href" and the normal text "Click This" are grey.
I'd like to change the color of the normal text to white (or some another shade of it) for better legibility.
Here's the text of the image for your repro purposes:
Click This

Answer 1

Use the Developer: Inspect Editor Tokens and Scopes action to open the Scope Inspector. Then click on the token you want to inspect. Then find out its textmate scopes. In this case, the href attribute is:
entity.other.attribute-name.html
meta.attribute.href.html
meta.tag.inline.a.start.html
text.html.derivative
You can take you pick of which one to use. For the sake of example, I'll pick meta.attribute.href.html.
And the text is:
text.html.derivative
Pick an appropriate textmate scope, and then use it in a token colour customization like so:
"editor.tokenColorCustomizations": {
"[Solarized Dark]": {
"textMateRules": [{
"scope":"meta.attribute.href.html",
"settings": {
"foreground": "#BBBBBB"
}
},{
"scope":"text.html.derivative",
"settings": {
"foreground": "#BBBBBB"
}
}],
}
},
You can also set a fontStyle attribute.
See also the docs for creating your own colour theme.