I have some lines in my HTML file commented out, but the inside of the comment is greyed out. Why is this happening?
The outside (<!-- and -->) has a color just the inside is greyed out.
I am using the dark-plus-syntax theme and when using the normal theme (dark-plus) it does not happen.
Does it have something to do with my theme settings? I have tried to change the color of the comments but that only changes the outsides. Here are the settings:
"editor.tokenColorCustomizations": {
"[dark-plus-syntax]": {
"textMateRules": [
{
"scope": [
"comment",
"comment.block.documentation",
"comment.block.documentation.js",
"comment.line.double-slash.js",
"storage.type.class.jsdoc",
"entity.name.type.instance.jsdoc",
"variable.other.jsdoc",
"punctuation.definition.comment",
"punctuation.definition.comment.begin.documentation",
"punctuation.definition.comment.end.documentation"
],
"settings": {
"foreground": "#b1833d"
}
}
]
},
},
In settings.json I added the comment.block.html scope inside the textMateRules of the color customizations:
{
"editor.tokenColorCustomizations": {
"[dark-plus-syntax]": {
"textMateRules": [
{
"scope": [
"comment.block.html", <-- Added this
// Other scopes
],
"settings": {
"foreground": "#b1833d"
}
}
]
}
}
}
Now the entire HTML comment is the same color.
Related
I'm trying to customize the color of the property-value keywords (reserved values) for .css and .scss files in the .json file in VSCode. I tried:
"editor.tokenColorCustomizations":{
"textMateRules": [
{
"name": "CSS Class and Support - Class",
"scope": [
"source.css entity.other.attribute-name.class.css",
"source.sass entity.other.attribute-name.class.css",
"source.scss entity.other.attribute-name.class.css",
"source.less entity.other.attribute-name.class.css",
"source.stylus entity.other.attribute-name.class.css",
"source.postcss entity.other.attribute-name.class.css"
],
"settings": {
"foreground": "#f56464"
}
}
]
}
But this didn't change the color of the property-value keywords.
I appreciate any help. Thanks in advance.
You are using the attribute-name.class scopes which appear to be the selectors like .myClass. It is working for those.
If by "property-value" keywords you mean something like background-color or border then this works:
"editor.tokenColorCustomizations":{
"textMateRules": [
{
"name": "CSS Property Names",
"scope": [
"support.type.property-name.css",
// etc.
],
"settings": {
"foreground": "#f56464"
}
}
]
}
I wanted to customize the color of comments or keywords(not sure what they are called but I have described them in the picture attached.).So how can I change their color using "editor.tokenColorCustomizations" in vs code.(The code in red color has to be changed.)
Use the Scopes Inspector from the Command Palette, click on those json keys and you will see their scope. Which can be used like this in your settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "support.type.property-name.json.comments",
"settings": {
"foreground": "#00ff00",
"fontStyle": "bold",
}
}
]
}
If you want to restrict the above change to a particular color theme, use this form:
```jsonc
"editor.tokenColorCustomizations": {
"[Monokai Classic]": { // your theme name here
"textMateRules": [
{
"scope": "support.type.property-name.json.comments",
"settings": {
"foreground": "#00ff00",
"fontStyle": "bold",
}
}
]
}
}
I'm trying to find out how to specify one color for single-line comment and another for block comment (multi-line).
The below works for setting ALL comments to a certain color:
"editor.tokenColorCustomizations": {
"comments" :"#ff0022",
}
Is there a way to specify them individually? e.g. "blockComment" : "#00FF00", "commentLine" : "#FF00222"
Use "textMateRules" to set scope settings for "comment.block" and "comment.line" can set the colors individually.
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": "comment.block",
"settings": {
"foreground": "#0000"
}
},
{
"scope": "comment.line",
"settings": {
"foreground": "#0000FF"
}
}],
}
To change punctuations "punctuation.definition.comment.js" (js):
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": "comment.line, punctuation.definition.comment.js",
"settings": {
"foreground": "#00FF00"
}
}]
}
I'm working on a language support plugin for a proprietary language I use at work. We access properties of deeply nested objects a lot, e.g. This.isa.Really.Long.Variable.Name.ActualValue so the code gets really dense with these. My idea was to apply a TextMate scope to everything before the last dot and change the color to a partially transparent white so it fades into the background.
I've successfully added a rule in my editor settings to change the color of a TextMate scope that I created.
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": "support.variable.long.myLang",
"settings": {
"foreground": "#ffffff90",
"fontStyle": "italic"
}
}]
}
However, adding this rule to "configurationDefaults" in my extension doesn't work and it warns "Unknown editor configuration setting". I can set other editor settings just fine.
Is there a way to do this?
Or is there already a TextMate scope that would generally correlate to faded out text?
Or any other way to fade/hide part of a line in VScode?
It should be possible, here I give you an example of my extension, defining colors to my new scopes. Works correctly.
"contributes": {
"configurationDefaults": {
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "my-extension.constants",
"settings": {
"foreground": "#b180a9"
}
},
{
"scope": "my-extension.variables",
"settings": {
"foreground": "#2ebe82"
}
},
{
"scope": "my-extension.translations",
"settings": {
"foreground": "#64a1f1"
}
},
{
"scope": "my-extension.store",
"settings": {
"foreground": "#b3b6b9"
}
}
]
}
}
}
I have a one color which makes me annoyed and I want to change it but don't know how to find it and change it with keeping the rest same.
Want to change the green color showed up below.
How to replace one color in VSCode
Sometimes you may not like a certain color of the current theme, so VSCode allows us to customize some colors to override part of the color theme.
Inspect Editor Tokens and Scopes
VS Code's tokenization engine is powered by TextMate grammars. VSCode color theme extension author use a built-in tool to view the semantics. We can use it too, the settings we're going to do can be thought of as extending the color theme. Don't worry, our job is simple.
I'll show you how to modify the color of string.
At first, open Command Palette. Enter keyword "Inspect Editor Tokens and Scopes" to select and run the tool. Move the cursor to the code and we'll see a panel similar to the following picture.
To solve the problem quickly, now we're just looking at the last line of the panel: `foreground string { "foreground": "#CE9178" }. What we need is the middle part which is "string". It is a scope in action for this semantic stake. The scope in action must be a part of the textmate scopes above.
Token Color Customizations
Next, let's open the file settings.jsonand add a new setting: editor.tokenColorCustomizations.
Keep the key of tokenColorCustomization same as the color theme you are using. In fact, you don't need to enter it manually, VSCode will list all of your color themes at the moment you enter the double quotes.
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "[CUSTOM NAME]",
"scope": "string",
"settings": {
"foreground": "#00FFFF"
}
}
]
}
}
Then we'll see that the color of string in editor has immediately changed.
It's so easIy, now you can do it yourself. If you have questions about how to get the scope, check out the information in the section below.
How to get the scope
I'm not going to explain in detail how to get the scope. Below are more examples to help you understand how to get the scope. If you still have questions, refer to the relevant information, such as semantic-highlight-guide.
No theme selector
When no theme selector, you can use textmate scopes above.
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "source.python",
"scope": "source.python",
"settings": {
"foreground": "#FEAA4F"
}
},
]
}
}
A precise scope
It looks like a tree structure, progressive layer by layer. The more to the right, the more precise the semantics.
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "entity function name",
"scope": "entity.name.function",
"settings": {
"foreground": "#FEAA4F"
}
},
]
}
}
More colors
Define more color rules.
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "entity function name",
"scope": "entity.name.function",
"settings": {
"foreground": "#FEAA4F"
}
},
{
"name": "string",
"scope": "string",
"settings": {
"foreground": "#45FD36"
}
}
]
}
}
Precise control of the color range
If you need more precise control over the range of color effects, try textmate scopes above. The higher scope has higher priority. You can use a portion of the scope.
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "function-call in python",
"scope": "meta.function-call.python",
"settings": {
"foreground": "#FEAA4F"
}
}
]
}
}
or
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"name": "function-call generic",
"scope": "meta.function-call.generic",
"settings": {
"foreground": "#FEAA4F"
}
}
]
}
}
or others.