Notes on creating a custom VS Code theme

July 10, 2024

Get a list of all the colors from here
After creating your theme, switch to it and test your changes live by editing the settings.json file

code

"workbench.colorCustomizations": {
  "[ThemeName]": {
    "panel.background": "#01030a",
  }
}

name values are automatically removed when you generate a theme based on your customizations. For example

code

{
  "name": "[MARKDOWN] - + * Punctuation List",
  "scope": "punctuation.definition.list.begin.markdown",
  "settings": {
    "foreground": "#6796E6"
  }
},

will become

code

{
  "scope": "punctuation.definition.list.begin.markdown",
  "settings": {
    "foreground": "#6796E6"
  }
},

this was a bummer for me as i was using the name key to add comments to JSON.

Publishing

code

npm install -g @vscode/vsce

# Create a .vsix file
vsce package

# auto-increment semVer version Major.Minor.Patch
vsce publish minor

vsce publish patch -m 'Panel colors updated (Terminal, Output etc.)'

Extensions are managed at https://marketplace.visualstudio.com/manage/

Notes on creating a custom VS Code theme

Publishing

Links