Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// place this into your Visual Studio Code (VSC) settings json file (I have it in my Workspace settings, not User settings)
// res: explanation and contact here... https://dev.to/functional_js/visual-studio-code-my-color-syntax-settings-2kl6
//colors ////////////////////////////////////////////////////////
"workbench.colorTheme": "Default High Contrast",
// "workbench.colorTheme":"Default Dark+",
//already black, but as an example
"workbench.colorCustomizations": {
"sideBar.background": "#000",
"editorLineNumber.foreground": "#203752",
"terminal.background": "#07000c",
"debugToolBar.background": "#7c1212",
"editor.lineHighlightBorder": "#000",
"tab.unfocusedActiveBorder": "#fff0"
},
"[Community Material Theme Hihg Contast]": {
"editor.background": "#000"
},
"editor.tokenColorCustomizations": {
/*
syntax coloring legend:
variables - light blue
instance of a type - light blue
types - teal
function name - evergreen
function call - bright green
comment - light gray
keyword - gray
string - magenta
number - pink
object key - navy blue
*/
"textMateRules": [
{
"scope": [
//"support.constant.property-value",
"keyword.control", // eg: import, from, export default
"storage.type", // keywords, eg:. const, let, var, if, else, continue, =>
"punctuation.definition.template-expression.begin", // eg: ${
"punctuation.definition.template-expression.end", // eg: }
],
"settings": {
"foreground": "#555",
}
},
{
"scope": [
"keyword.control.loop", // eg: for, while, do, break, continue
],
"settings": {
"foreground": "#f55",
}
},
{
"scope": [
"string",
"constant.character", // eg: \n
],
"settings": {
"foreground": "#c0c",
}
},
{
"scope": [
"constant.numeric",
],
"settings": {
"foreground": "#f0a",
}
},
{
"scope": [
"meta.group.regexp", // all literals (nonmetacharacters) in the regex pattern
"string.regexp",
"constant.language.boolean.false",
"constant.language.boolean.true",
],
"settings": {
"foreground": "#b00",
}
},
{
"scope": [
"meta.arrow", //does nothing
"storage.type.function.arrow", //fat arrow function
"keyword.operator.ternary",
],
"settings": {
"foreground": "#f11",
"fontStyle": "", //bold, italic;
}
},
{
"scope": [
"meta.paragraph.markdown",
],
"settings": {
"foreground": "#fff",
}
},
{
"scope": [
"punctuation.terminator", //gray out the ending semicolon
"punctuation.definition.string.begin",
"punctuation.definition.string.end",
// "punctuation.definition.block", //grays out the curlies
"meta", //color all meta characters like... comma, curlies
"punctuation.accessor", //period between object and property
// "meta.brace.round", //grays out the parenths
"string.quoted.single",
"variable.other.readwrite.alias", //gray out the variables in the import statements
],
"settings": {
"foreground": "#444",
// "fontStyle": "italic",
},
},
{
"scope": [
"comment", //gray out comments
],
"settings": {
"foreground": "#666",
"fontStyle": "italic",
},
},
{
"scope": [
"entity.name.function", //func vars that are invoked
],
"settings": {
"foreground": "#0e0",
"fontStyle": "italic",
}
},
{
"scope": [
"variable.other.readwrite", //func vars that are not invoked
],
"settings": {
"foreground": "#070",
// "fontStyle": "italic", //underline
}
},
{
"scope": [
"entity.name.type", //the types in {} in jsdocs
"variable.other.jsdoc", //the param name part of the jsdoc
],
"settings": {
// "foreground": "#58a" //default color teal-ish
}
},
{
"scope": [
"storage.type.class.jsdoc", //the @ symbol keywords in the jsdoc, only when the comment block starts with a /**
],
"settings": {
"foreground": "#443",
}
},
{
"scope": [
"variable.other.object", //obj instance
],
"settings": {
"foreground": "#3aa",
}
},
{
"scope": [
"variable.other.property", //the key of an obj
"variable.other.object.property", //for keys that have functions called on their types, like o.arr.push, it makes arr blue
],
"settings": {
"foreground": "#3f3fec",
}
},
//only for class methods
{
"scope": [
"entity.name.method",
],
"settings": {
"foreground": "#b3ff00",
}
},
{
"scope": [
"keyword.operator",
"meta.brace.square",
"punctuation.definition.group.regexp",
"keyword.control.anchor.regexp", // parenths
"punctuation.definition.character-class.regexp", // []
"constant.other.character-class.regexp", // \s \n
],
"settings": {
"foreground": "#fa0",
}
},
{
"scope": [
"keyword.operator.new",
// "variable.parameter", //con: only colors the symbol in the parameter list, not in its usage in the body of the function
],
"settings": {
"foreground": "#990000",
}
}
]
},
//end colors: /////////////////////////////////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment