Adding Custom Syntax Highlighting to a Theme in VSCode

VSCode Themes are a quick way to update the color scheme and syntax highlighting of your code, but you might find your favorite theme isn't quite perfect. VSCode supports customizations that allow you to fix that problem.

In this lesson, I add settings to update the syntax highlighting for the Synthwave '84 theme in Markdown and MDX files. We do this by inspecting TM scopes and making custom rules in our settings.json.

The settings I used are:

"editor.tokenColorCustomizations": {
  "[SynthWave '84]": {
    "textMateRules": [
      {
        "scope": "markup.inline.raw",
        "settings": {
          "foreground": "#72f1b8",
        }
      },
      {
        "scope": "markup.italic.markdown",
        "settings": {
          "foreground": "#36f9f6",
          "fontStyle": "italic"
        }
      },
    ]
  }
}