Visual Studio Code: Theme Tricks

Color Theme Customization

Also see the official Customizing a Color Theme documentation on the Visual Studio Code site.

Local Overrides

I used this user setting in settings.json to override a bad tab color in a theme. Use the Command Palette to select “Preferences: Open Settings (JSON)” to easily locate the settings.json file. I’m specifically modifying the “Afterglow Remastered” theme here but if you want to override all themese don’t nest it.

"workbench.colorCustomizations":{
    "[Afterglow Remastered]":{
        "tab.activeBackground":"#404040"
    },
    "[Eva Dark Italic]": {
        "tab.activeBackground": "#343b4a",
        "editorBracketMatch.background": "#ff90704f",
        "editorOverviewRuler.bracketMatchForeground": "#ff90704f",
        "editorIndentGuide.activeBackground": "#ff90704f",
        "editor.selectionHighlightBackground": "#3f4d687f",
        "editor.wordHighlightBackground": "#3f4d687f",
        "editor.background": "#282c34",
        "gitDecoration.ignoredResourceForeground": "#9090B0",
        "editor.selectionBackground": "#C090E040",
        "editor.wordHighlightStrongBackground": "#FF909020"

    }
},

The extension Peacock does something similar, writing these values into your user settings:

"workbench.colorCustomizations": {
  "activityBar.activeBackground": "#ab307e",
  "activityBar.activeBorder": "#25320e",
  "activityBar.background": "#ab307e",
  "activityBar.foreground": "#e7e7e7",
  "activityBar.inactiveForeground": "#e7e7e799",
  "activityBarBadge.background": "#25320e",
  "activityBarBadge.foreground": "#e7e7e7",
  "statusBar.background": "#832561",
  "statusBar.foreground": "#e7e7e7",
  "statusBarItem.hoverBackground": "#ab307e",
  "statusBarItem.remoteBackground": "#832561",
  "statusBarItem.remoteForeground": "#e7e7e7",
  "titleBar.activeBackground": "#832561",
  "titleBar.activeForeground": "#e7e7e7",
  "titleBar.inactiveBackground": "#83256199",
  "titleBar.inactiveForeground": "#e7e7e799"
},

You can also use the command “Developer: Generate Color Theme from Current Settings” to create a scheme file from your current theme which can then be packaged into an extension

Token Color Customizations

For other color formatting specific to syntax highlighting as opposed to VSCode UI, you need to use TextMate scopes as following in this example:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    { "scope": "markup.bold", "settings": { "foreground": "#FFFFFF", "fontStyle": "bold" } },
    { "scope": "markup.italic", "settings": { "foreground": "#FFFFFF", "fontStyle": "italic" } },
    { "scope": "markup.heading", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.inline.raw", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.fenced_code.block", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.quote", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.list.unnumbered", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.list.ordered", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "markup.underline.link", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "comment", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "comment.line", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "comment.block", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "string", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "string.quoted", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "string.template", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "keyword", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "keyword.control", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "keyword.operator", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "variable", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "variable.parameter", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "variable.other", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "entity.name.function", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "entity.name.class", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "entity.name.type", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "support.function", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "support.class", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "support.type", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "constant", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "constant.numeric", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "constant.language", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "storage.type", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "storage.modifier", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "punctuation.definition", "settings": { "foreground": "#FFFFFF" } },
    { "scope": "meta.embedded", "settings": { "foreground": "#FFFFFF" } }
  ]
}
Using **Command Palette > Developer: Inspect Editor Tokens and Scopes** allows you to see the name of what tokens are in use.

### Syntax Highlighting

VSCode also has "Semantic Highlighting" which is provided by language servers, and contain type information. For example:
```json
"editor.semanticTokenColorCustomizations": {
  "rules": {
    "variable": { "foreground": "#FFFFFF" },
    "variable.readonly": { "foreground": "#FFFFFF" },
    "parameter": { "foreground": "#FFFFFF" },
    "function": { "foreground": "#FFFFFF" },
    "function.async": { "foreground": "#FFFFFF" },
    "method": { "foreground": "#FFFFFF" },
    "method.async": { "foreground": "#FFFFFF" },
    "class": { "foreground": "#FFFFFF" },
    "interface": { "foreground": "#FFFFFF" },
    "type": { "foreground": "#FFFFFF" },
    "typeParameter": { "foreground": "#FFFFFF" },
    "enum": { "foreground": "#FFFFFF" },
    "enumMember": { "foreground": "#FFFFFF" },
    "namespace": { "foreground": "#FFFFFF" },
    "property": { "foreground": "#FFFFFF" },
    "property.readonly": { "foreground": "#FFFFFF" },
    "keyword": { "foreground": "#FFFFFF" },
    "string": { "foreground": "#FFFFFF" },
    "number": { "foreground": "#FFFFFF" },
    "operator": { "foreground": "#FFFFFF" },
    "decorator": { "foreground": "#FFFFFF" }
  }
}

Highlighting

I use the string /// SOMETHING /// as an 80-character header for sections, followed by an 80-char /// - - - string. This helps see sections, but a little color highlighting helps. The extension Highlight (fabiospampinato.vscode-highlight) by Fabio Spampinato allows you to enter arbitrary regex for highlighting. This is what I’m using in settings.json:

"highlight.regexes": {
  "(/// [^/]+? ///+)\n": [
    {
      "color": "#A3BDFF" ,
      "backgroundColor": "#2E4AE05f"
    }
  ]
}

There’s also the Currently Selected Line

"workbench.colorCustomizations": {
  "editor.lineHighlightBorder": "#222",
  "editor.lineHighlightBackground": "#222",
}

There is one matching group, which looks for /// folowed by non-greedy non-slashes, and then at least three closing slashes followed by a linefeed.