Customizing the VSCode editor

After seeing the Github Co-Pilot webage, I got intrigued by the color scheme used to demo the “powers” of Co-pilot. The dark theme caught my attention and I wanted to incorporate into my editor. Unfortunately, there is no official version of the Github Co-pilot theme.

Upon search, I found this add-on https://marketplace.visualstudio.com/items?itemName=BenjaminBenais.copilot-theme which is supposed to provide the same theme. However I notice it did not color my variables and functions in a same way. Now I wondered, how the color of these “functions”, “keywords” and comments is determined.

It turns out, there is a setting in the vscode made specifically for this purpose. It can be set using editor.tokenColorCustomizations. For example, here is the snippet from my setting.

 "editor.tokenColorCustomizations": {
    "comments": "#918d8d",
    "strings": "#226ea3",
    "keywords": "#ee8277",
    "functions": "#6623cb",
    "variables": "#FFFFFF",
    "numbers": "#f78c6c",
    "textMateRules": [
      {
        "scope": "variable.other",
        "settings": {
          "foreground": "#241515"
        }
      },
      {
        "scope": "variable.parameter",
        "settings": {
          "foreground": "#eb4893"
        }
      },
      {
        "scope": "variable.function",
        "settings": {
          "foreground": "#eb7c15",
          "fontStyle": "bold",
        }
      },
      {
        "scope": "Other",
        "settings": {
          "foreground": "#F2AA65",
        }
      },
      {
        "scope": "keyword.operator.other",
        "settings": {
          "foreground": "#F97b58",
        }
      },
      {
        "scope": "comment.line",
        "settings": {
          "foreground": "#918d8d",
          "fontStyle": "italic underline"
        }
      }
    ]
  },

We notice that there is a color setting for comments, strings, keywords, functions, variables, and numbers. I was able to set this but my R code still did not color all the words or now we know it- “Tokens”. The closest wikipedia explanation I found is here: https://en.wikipedia.org/wiki/Lexical_analysis#Token.

It turns out those missing “token” can be set using “textMateRules”.

 {
 "scope": "variable.other",
 "settings": {
      "foreground": "#241515"
   }

Basically, it required “scope” property for the target token and settings for color and font option. Please note that we still cannot set font.size property for these tokens. How to find what are the names of the tokens in your code. There is a inbuilt way within vscode to find out using (cmd+shift+p) and typing “Developer: Inspect Editor Tokens and Scopes”. Once activated, hover your mouse our target words to find the names/scopes of these tokens.

We see that main belongs to “support.function.go”. We can use either “support.function.go” or just “support.function” to use it in the textmate rules setting. That is it. It should now work with your color choice and font style.