VisualStudioCode_settings_editorFontColors.js

// 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: /////////////////////////////////////////////////////////////////