Visual Studio Code: Theme Tricks

Posted Tuesday, March 15, 2022 by Sri.Tagged MEMO, VISUAL STUDIO
EDIT STATUS:new

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.