I installed Visual Studio Code with Anaconda, and want to customize syntax highlight. I'm using default dark theme and that's good but colors of python built-in functions and methods aren't.
I found 'Developer : Generate Color Theme From Current Settings' and tried to find where to change. (I'm not sure if it is right file to change colors of syntax highlight)
What should I do?
In Visual Studio Code you can use color themes which are built-in, install new created by community and uploaded to Marketplace or edit allready existed. If you only want to customize a specific color of syntax e.g. function name, you need to edit settings.json file.
To do this go to File > Preferences > Settings > Workbench > Appearance and in sections Color Customizations click on Edit in settings.json
Now you need to specify what exactly you want customize by adding code in this file and just save it.
This code will change color of function name to orange:
"editor.tokenColorCustomizations": {
"functions": "#FF9900"
If you want to change some other settings e.g. variables, strings, numbers follow this pattern:
"editor.tokenColorCustomizations": {
"what_you_want_to_customize" : "hex_value_of_color"
If you want to change color when you call methods you need to specify scope (in the same settings.json file):
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.function-call",
"settings": {
"foreground": "#FF9900"
}
}
Now when you call function in some objects it will appear as orange color.
Here's how it looks with pandas.DataFrame():
If you create your own method in objects it will also be color of your choice.
And this is how it looks when you combine this two settings.
I've just change color to red when function is created and orange when function is called for better explanation.
There is also official docs for further reading and much more settings to make it custom looks (text, bars, buttons).
{ and end with } , snippets examples wchich I provide (or your own rules) are separated after and before with commas (,) from others - generally speaking it's still .json format.
(label=my_label). Usually vscode will highlight both the argument (label) and the variable (my_label) in the same color. But I would like to use a different color for arguments.Correct form of Stoockbroker's answer. (missing parentheses corrected.)
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.function-call.generic.python",
"settings": {
"foreground": "#FF0000"
}
}
]
},
Here a short and concise answer with an example.
You will have to edit settings.json. To do that click: file->preferences->settings->workbench->color customizations (or simply search for 'color customization' in settings).
Within this json you will find "editor.tokenColorCustomizations" and "workbench.colorCustomizations". These nested JSONs are what you are looking for.
To understand how to customize every single token have a look to the amazing answer of Joey in this similar question.
But if you are lazy (like me) and does not want to read a lot, here a practical example. Just paste these two elements in the root json of settings.json to override the Dark theme. I commented the most important parts. Enjoy
"workbench.colorCustomizations": {
"[*Dark*]": { // terminal colors
"terminal.background": "#181818",
"terminal.foreground": "#00ff00",
"terminalCursor.background": "#D8D8D8",
"terminalCursor.foreground": "#D8D8D8",
"terminal.ansiBlack": "#181818",
"terminal.ansiBlue": "#7CAFC2",
"terminal.ansiBrightBlack": "#585858",
"terminal.ansiBrightBlue": "#7CAFC2",
"terminal.ansiBrightCyan": "#86C1B9",
"terminal.ansiBrightGreen": "#A1B56C",
"terminal.ansiBrightMagenta": "#BA8BAF",
"terminal.ansiBrightRed": "#AB4642",
"terminal.ansiBrightWhite": "#F8F8F8",
"terminal.ansiBrightYellow": "#F7CA88",
"terminal.ansiCyan": "#86C1B9",
"terminal.ansiGreen": "#A1B56C",
"terminal.ansiMagenta": "#BA8BAF",
"terminal.ansiRed": "#AB4642",
"terminal.ansiWhite": "#D8D8D8",
"terminal.ansiYellow": "#F7CA88",
// background
"editor.background": "#0f0f0f",
// brackets
"editorBracketHighlight.foreground1": "#FAE734",
"editorBracketHighlight.foreground2": "#DE6257",
"editorBracketHighlight.foreground3": "#F58A6B",
"editorBracketHighlight.foreground4": "#DE8657",
"editorBracketHighlight.foreground5": "#FAA75A",
"editorBracketHighlight.foreground6": "#abb2c0",
// various errors
"editorBracketHighlight.unexpectedBracket.foreground": "#ff0008",
"editor.rangeHighlightBackground": "#ff0008",
}
},
// custom
"editor.tokenColorCustomizations": {
"[*Dark*]": {
"strings": "#4AFF43",
"numbers": "#1cdfdf",
"functions": "#a856ff",
"variables": "#F5AB76",
"comments": "#1ABEE8",
"textMateRules": [
{
// function parameters
"scope": "variable.parameter",
"settings": {
"fontStyle": "",
"foreground": "#F5762A"
}
},
{
// language constants such as bools
"scope": "constant.language",
"settings": {
"fontStyle": "",
"foreground": "#FF299E"
}
}
]
}
},
"editor.semanticTokenColorCustomizations": {
"enabled": true,
},
I used this answer to create a copy of the carbon.now.sh "One Dark" theme for Python using VSCodium (VSCode sans Microsoft)
The theme results from this code in the settings.json file:
"workbench.colorCustomizations":
{
"editor.background": "#282C34"
},
"editor.tokenColorCustomizations":
{
"textMateRules":
[
{
"scope": "meta.function-call",
"settings":
{
"foreground": "#5BB6C1"
}
},
{
"scope": "string.quoted.single.python",
"settings":
{
"foreground": "#94BC79"
}
},
{
"scope": "source.python",
"settings":
{
"foreground": "#DE6D77",
}
}
]
}
Here is the code sample I want to replicate, generated with carbon.now.sh:
:
The theme settings above helped me replicate it in VSCodium / VSCode for a project I am working for Frappe.
When combined with the CodeSnap Extension, you can create the same look as Carbon.now.sh, but offline:
This streamlined my productivity when creating documentation, videos with multiple code snippets. Plus I can type the useful code once, and not have to copy paste it elsewhere, or simply get a stylized image snippet of existing code.
I used the next configuration in settings.json to show the python code like a normal language syntax in VSCode:
{
"editor.tokenColorCustomizations":
{
"textMateRules":
[
{
"scope": "meta.function-call",
"settings":
{
"foreground": "#DCDCAA"
}
},
{
"scope": "string.quoted.single.python",
"settings":
{
"foreground": "#CE9178"
}
},
{
"scope": "source.python",
"settings":
{
"foreground": "#9CDCFE",
}
}
]
}
}
Psdt: https://carbon.now.sh/ help me to choose the correct colors.
