VS Code, changing color theme for variables - visual-studio-code

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.

Related

Custom syntax coloring in VSCode

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"
}
}
]
}
}

Background color customization for Strings in VSCode

Is it possible to have background color changed in visual studio code but only for few programmatic tokens like classes and strings in Java and Python.
I'm able to change color but not background color for a particular theme.
"editor.semanticTokenColorCustomizations": {
"[Monokai Dimmed]": {
"enabled": true,
"rules": {
"module": "#943535",
"class": {"foreground": "#943535", "bold": true}
}
}
},
Maybe this is more like a function of highlight? This way you can install some extensions of that type.
Besides, during your code, I still remember some settings in official document.
In the part of Editor syntax highlighting, there are something like:
"editor.tokenColorCustomizations"
It can tune the editor's syntax highlighting colors('comments', 'strings', ...).
But I'm not sure this is what you want. You can see this for more information. Hope helpful.
enter link description here

How to change the color of a specified syntax in VSCode, without affecting the rest of the syntax that is colored by the theme?

I really like the V.S. Code theme, Abyss. On occasion I find that the theme makes my code difficult to read, the text rendered in the editor will look like it is blending into the background, therefore; I thought changing individual syntax color would be a good solution.
I want to be able to adjust a couple of color-tokens, while leaving the rest of the syntax unchanged. How can I select, and change the properties of color tokens, without impacting any other parts of the theme that's currently set in the editor?
I want to use the code syntax color of the GitHub dark default theme with the Abyss theme on the rest of UI.
I found a site (click to see) that suggests changing the syntax colors with the editor.tokenColorCustomizations property.
I am not able to understand that how can I copy the color configuration from GiHub dark default to the Abyss theme.
V.S. Code users have the ability to style the syntax that is displayed in the editor, as well as the ability to style the editor its self — this includes the workbench, and all off the items in the workbench. To start styling the workbench, or syntax in the editor, you must first add the following JSON properties to either your user-scoped settings.json file, or by adding it to a workspace-scoped settings.json.
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
Example of a properly configured settings.json file:
// "./.vscode/settings.json"
{
"workbench.colorCustomizations": {
"editor.background": "#08182F",
"sideBar.background": "#00132D",
"panel.background": "#00132D",
"activityBar.background": "#002040",
"editorGroupHeader.tabsBackground": "#00132D",
"tab.inactiveBackground": "#00132D",
"tab.activeBackground": "#003054",
"tab.activeBorder": "#003054",
"breadcrumb.background": "#003054",
"statusBar.background": "#005280",
"sideBar.border": "#103050",
"titleBar.border": "#103050",
"statusBar.border": "#103050",
"menu.border": "#103050",
"contrastBorder": "#103050",
"panel.border": "#103050",
"editorRuler.foreground": "#103050",
"tab.border": "#103050",
"tab.lastPinnedBorder": "#103050",
"activityBar.border": "#103050",
},
"editor.tokenColorCustomizations": [
{
"scope": "punctuation",
"settings": {
"foreground": "#C4C4C4",
"fontStyle": ""
}
},
{
"scope": "comment",
"settings": {
"foreground": "#246488",
"fontStyle": ""
}
},
{
"scope": "string",
"settings": {
"foreground": "#98DAF4",
"fontStyle": ""
}
},
]
}
There are many more properties that can be used to style your editor and syntax. A good resource to refer to is this template, its from the YO CODE generator, and it is what several theme designers use as a starting point when creating a new theme.
Theme Template (e.g. you don't have to make a theme to use the properties).
The most useful tool at your disposal is when writing theme properties — just like in the example above — is VSCodes suggestion widget. The suggestion widget is most often used to auto complete code, however, its usefulness extends much further than finishing a line of text for you. If you type, "background", while you are focused inside of one of the colors, or tokenColors, properties a whole list of available background properties will be available to choose from, and you are not limited to just background properties, the suggestion widget will work for finding borders, foregrounds, icons, buttons, inputs, bars, highlights and a whole lot more
Perhaps the best resource to read would be the VSCode Contributed Page on Color-Themes
EDIT: If you download the GitHub theme, you can find the theme's JSON file, which is the source code for the "Dark GitHub Theme" in the following location:
$HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json
When ever you have a theme's source JSON Document, you can copy and paste individual properties from the theme you located, into your ./.vscode/settings.json file using the properties:
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
NOTE: It takes some practice, and some reading to get good at creating themes, or even just configuring your current theme to customize it a bit like your doing now.
ADDITIONAL HELP
I think it might help if I explain what it is your doing.
The workspace settings.json file, located in the root of each project...
"./.vscode/settings.json"
...takes precedence over all other configuration files, therefore, when a setting, or property is being configured in two files, and one of the files is "./.vscode/settings.json" then the configuration set inside "./.vscode/settings.json" will win-out the configuration in the other file, because "./.vscode/settings.json" overrides any configurations it holds, that are also held somewhere else. (I Hope that makes sense)...
Next to the workspace "settings.json" file, is the users settings.json file, which is located at:
"$HOME/.config/Code/User/settings.json"
So basically all you need to know at this point is your settings.json files are the word of the land, everything else is overridden. This is very important, because when you use the settings.json files to set color-token properties to highlight some syntax that is being colored by a theme, and your recoloring it because you don't like it, what you are doing, is overriding the theme's JSON file located in the themes extension directory # $HOME/.vscode/extensions. If you don't set a property in a valid settings.json file, then the property will remain unchanged. This lets you select and choose which properties to change, by overriding the properties you don't like. And as I have stated in the comments and above, these are the properties you will use to preform the overrides.
"colors":{ /* properties here */ }
"tokenColors":[ /* properties here */ ]
Rather than trying to copy and paste entire themes, just try to change a single element. Once you succeed at changing one element, then you can try changing several in unison.
ctrl+shift+p =>preferences:color theme==> select Dark+(default dark)

How to "override" semantic token type of VSCode theme

I would like to know how to tweak my VSCode theme (One Dark Pro), a theme with semantic highlighting.
I cannot override some of its semantic token types.
With most themes I would write this in settings.json:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "Javascript - Variable/object",
"scope": [
"variable.other.object.js"
],
"settings": {
"foreground": "#c7452e",
"fontStyle": "bold italic"
}
}
]
}
}
But with this theme (and also other ones with semantic opinion) I cannot override it, as if I needed to use !important in CSS.
So this is the result of my token and scope inspection after my rule.
As you can see, my settings are indeed read but are apparently not 'specific' enough as to beat the semantic interpretation or overridden by it, and are disregarded (last three lines) and instead the modifying semantic token type takes prevalence.
Is there a way to do this per individual textmate scope (i.e. without losing the rest of the semantics of that wonderful theme) like if I just want to change the color of that particular item?
So when syntax is highlighted by a theme, settings.json files have priority over the syntax highlighting implemented by your set theme, however, if you activate semantic highlighting, then the theme highlights your syntax, your settings.json file takes priority & overrides the theme, and then the language server has priority over the theme and over the local user, & workspace, settings.json files. So in other words, you can't override the token because the token is being overridden already by a scope that has higher priority than your configuration file. Now with that said, if you don't like it, just turn Semantic highlighting off (code snippet below shows the configuration for turning off semantic highlighting).
/** #file "./.vscode/settings.json" */
{
"editor.semanticHighlighting.enabled": false
}

Visual Studio Code - customize color of specific html tags

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?