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"
    }
},

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

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 is one matching group, which looks for /// folowed by non-greedy non-slashes, and then at least three closing slashes followed by a linefeed.