After searching high and low, I don't seem to able to find out how to customize the color of specific html tags in Visual Studio Code. Changing the color of them all is easy enough, with the following textmate scope:
entity.name.tag.html
That changes all tags. But what if you want to change just the color of the "Form" tag? i.e.<form></form>
So how do I make the "Form" tag distinct in color from the "Div" tags, for instance?
Inspecting the editor tokens/scope within VSC, I can see scopes such as:
meta.tag.structure.form.start.html
But that changes something else, not the Form tag itself.
Not sure why isn't working for you? This works for me:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.tag.structure.form.start.html entity.name.tag, meta.tag.structure.form.end.html entity.name.tag",
"settings": {
"foreground": "#00ff00",
"fontStyle": "bold"
}
},
]
},
Note that I have to add entity.name.tag to each scope selector to get it to work. Demo:
Was there something else you were trying to accomplish?
Related
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
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.
I currently have this in settings which does this trick when the comments are just text
{
"scope": "comment.block.cfml",
"settings": {
"foreground": "#f5cd76"
}
}
However if there are tags then the tags use their default color. I can see for a split second that the color of all the comment block is correct which tells me that something is overwrite it?
This is what it does
What i want it to do
You could install the CFML package for VSCode. (Assuming that's what you meant by Visual Code.) It identifies all the "parts" of statements and triggers what's needed, generally. Never had an issue. (Though I have had an issue with it using script comments (//) instead of the markup comments <!--- --->.
{
"scope": "comment",
"settings": {
"foreground": "#f5cd76"
}
}
this seemed to of worked
I never though I'd need this in such language as Python, but I actually really do after finding out that I can pass some type info and create dataclasses.
The point is that I use VSCode with Andromeda theme which i really like, and use it for some time right now, however - the theme doesn't color out the types.
I'd really like types to be styled as bold italic in some sea-alike colour, but I can't really find a straight way to do it.
I'm not sure if it's possible to style out like this not only the basic types but also lib classes (numpy.ndarray for example).
Here's the answer i injected into my "settings.json" for those who would face the same problem in the future:
"editor.tokenColorCustomizations": {
"[Andromeda Italic]": {
"textMateRules": [
{
"scope": "support.type.python",
"settings": {
"foreground": "#00ceb2",
"fontStyle": "italic bold"
}
}
]
}
}
in VS Code does anyone know how to change the color theme for variable names for C++. I can change the colors for functions, comments, keywords, but I can't get variables to work. Any help would be great Thanks.
This has changed since the original answer was posted and it is now outdated.
As #alex-myers mentioned in the comments, you can use TextMate to target intellisense tokens.
For example:
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": {
"textMateRules": [
{
"scope": "variable.other.local",
"settings": {
"foreground": "#FF0000",
}
}
]
}
}
See: https://code.visualstudio.com/docs/cpp/colorization-cpp
UPDATE: this is now possible with the C++ extension. Upvote #TheBat's answer since he originally posted the update. The scope is variable.other.local and his answer shows what to add to your settings file.
NOTE: the answer below is still accurate if you do not have the extension
I'm the maintainer of the VS Code C++ Syntax, and sadly there is not yet a way to change the color of all C++ variables, the Python syntax is the same way. You can change the color of source.cpp which will change the default color, and you can change the color of some existing variables with variable and variable.parameter, but this will still not affect many of the untagged variables.
We're working on changing this, but it is going to take quite awhile.
For general scope names, look at https://macromates.com/manual/en/language_grammars#naming-conventions
You can edit the corresponding theme *.json file. For example, if you are using the Dark+ (default dark) theme, you can find the theme json file at extensions/theme-defaults/themes/dark_plus.json. In this file we find the following text mate theme rule:
{
"name": "Variable and parameter name",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable",
"entity.name.variable"
],
"settings": {
"foreground": "#9CDCFE"
}
}
Please note that some themes do not define styling for the variable scope so you would have to add your own (like the above snippet). Also not all styles of variable naming are defined in the c++ grammar file. For more details on how to add your specific naming style grammar you can see this answer.
I am creating my own Visual Studio Code theme, and I want the links / URLs to have their own independent color in HTML and CSS. From what I have read it seems that this was once accomplished with detected-link, but should now use linkForeground. I have tried both in the theme.json file I created, but neither seems to work. Does anyone know how to customize link / URL syntax highlighting color in Visual Studio Code .json file?
This is what I tried...
{
"name": "goto-definition-link",
"scope": "linkForeground",
"settings": {
"foreground": "#4B83CD"
}
},
Here is one of the discussions that I am referencing above.
https://github.com/Microsoft/vscode/issues/18378
There are two parts to this: using syntax colors to set the color of links in the grammar and using workbench colors to set the color of a clickable link when the user hovers over it.
To set the syntax colors of a link, you need to determine a unique scope for the links and write a TextMate colorization rule that uses this scope. For example, using the Developer: Inspect TM Scope command in VS Code, I can see the css url() links have a scope of variable.parameter.url.css, so my theme would be:
{
"type": "dark",
"tokenColors": [
{
"scope": [
"variable.parameter.url.css",
],
"settings": {
"foreground": "#f0f"
}
}
}
}
The second one is easier; just use the editorLink.activeForeground color theme setting:
{
"type": "dark",
"colors": {
"editorLink.activeForeground": "#ff0",
...
},
"tokenColors": [ ... ]
}
This changes the color of the link when you hover over it. It cannot be changed per language.