How to specify colour for dark and light theme in general in VSCode user settings - visual-studio-code

I'd like to customize VSCode colour settings in general for dark or light theme variants, for example:
"workbench.colorCustomizations": {
"light": {
"editor.background": "#ff0000",
}
}
To my knowledge, however, it's only possible to define colours for all situations or for specific themes, e.g.
"workbench.colorCustomizations": {
"editor.background": "#ff0000",
"[Default Light+]": {
"editor.background": "#ff0000"
}
}
Problem with this solution is, that it applies everywhere or for one specific theme, not any light-variant theme in general.
Actually, colours do have default values for dark/light/high-contrast variants. For example, when adding colour through contributes.colors in an extension's package.json, this is how one does it:
"contributes": {
"colors": [
{
"id": "mycolour",
"description": "my colour",
"defaults": {
"dark": "#ffffff",
"light": "#000000",
"highContrast": "#010203"
}
}
]
}
Is there any way to customize a colour's generic variants in the user settings, just like in contributes.colors? The documentation I've found on this topic is not what I'd call exhaustive (just a few examples basically), but there might be things that I missed. Also, I used workbench.* in the above examples because I'm mostly interested in that setting, not in the editor.* colour settings.

Looks like based on #uEv340yQ3gU1's answer that for the time being this feature isn't supported. However over at https://stackoverflow.com/a/69200037/17196251 I found out that specifying multiple themes and wildcards are now supported! See https://code.visualstudio.com/updates/v1_59#_extended-theme-customization-syntax
We can do a decent workaround by specifying the wildcard [*Light*] or [*Dark*] (along with any themes you use often e.g. Monokai). Looks something like this
"workbench.colorCustomizations": {
// Default
"editor.background": "#000000",
// Exception for light themes
"[*Light*][AnotherTheme]": {
"editor.background": "#ffffff"
}
}
I currently use this for specifying custom bracket colorization to use white for the first bracket on dark themes and black on light themes! Woo

As it turns out, it's not possible yet. There's a feature request for this functionality (https://github.com/microsoft/vscode/issues/101418), so, hopefully, it might be added in the future.

Related

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

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.

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 put multiple theme names in VSCode colorCustomization

For colour customisation of any theme in VSCode we do it like this
"workbench.colorCustomizations": {
"[Night Owl No Italics]": {
"activityBar.background": "#000C1D",
"activityBar.border": "#102a44",
"sideBar.background": "#001122",
"sideBar.border": "#102a44",
"sideBar.foreground": "#8BADC1"
},
How to add multiple name in the theme may be like [Night Owl, Night Owl No Italics] (This doesn't work). I don't want to repeat and define the same properties twice for two different themes. Is there any way to do this?
This is not supported as of VS Code 1.33. You have to either:
Duplicate the color customization for each theme
Set the color customization globally so that it applies to all themes
Please file a feature request if you would to see your proposal supported
Coming in vscode v1.59:
There is new syntax to customize multiple themes at once:
"workbench.colorCustomizations": {
"[Abyss][Red]": {
"activityBar.background": "#ff0000"
},
"[Monokai*]": {
"activityBar.background": "#ff0000"
}
} ```
Multiple themes can be listed as well as the * wildcard character can be used at the beginning and the end of the name.
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_59.md#extended-theme-customisation-syntax