How to write a Visual Studio Code color theme from scratch

Prerequisites

I’ll consider the reader familiar with npm (or at least having it installed) and with editing a JSON file following the JSON syntax.

The building blocks of a theme

To create your own theme, first of all you need a directory where to put it. This place, in macOS, OSX or Linux is in the ~/.vscode/extensions directory while in Windows it should be in %USERPROFILE%\.vscode\extensions. Create a directory in there, using the name of your soon-to-be-created theme, and cd into it.

  • a package.json file which describes it
  • a theme file, in JSON format
  • a README, not necessary but always a nice touch

The package.json file

We can start with a very basic npm init to create the bare bones file. Since a theme can be packaged and published (for example in the VSC marketplace), we consider it as an npm module. Technically, though, what we are writing is a VSC extension.

{ ...    "publisher": "claudioc",
"engines": {
"vscode": "^1.0.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "MyTheme",
"uiTheme": "vs-dark",
"path": "./themes/my-theme.json"
}
]
}
...}
  • The publisher is your username on the VSC marketplace (not necessary, unless you want to publish it)
  • The categories is also part of the Marketplace information
  • The contributes section is quite explanatory by itself and contains all that’s needed for VSC to be able to select your theme from the Theme Selector

The theme file

Now for the real deal: create a new file, supposedly named after the name of your theme, and place it inside the themes subdirectory of the theme itself. The extension and (syntax) of the file must be json.

  1. A way to select the “thing” you want to change and,
  2. A syntax to define how to change it (i.e. apply a new color, or a font style)
{
"name": "MyThemeName",
"type": "dark",
"colors": {
},
"tokenColors": [
]
}
"colors": {
"editor.background": "#1B1B1B",
"editor.foreground": "#00BCD4",
"editor.lineHighlightBackground": "#313131"
}
{
"name": "Comments",
"scope": [
"comment",
"punctuation.definition.comment"
],
"settings": {
"foreground": "#81C784",
"fontStyle": "italic"
}
}
...
"tokenColors": [
{
"name": "Comments",
"scope": [
"comment.block"
],
"settings": {
"foreground": "#81C784",
"fontStyle": "italic"
}
},
{
"name": "The const variable type",
"scope": [
"storage.type"
],
"settings": {
"foreground": "#EF6C00"
}
}
]

Conclusion

This is basically it. You can now — with a lot of patience, to be honest– start writing your own, full theme. I find it an activity which is both very satisfying and also a bit unnerving: if for example you set the color of the storage.type to change the color of the const keyword, also the arrow of an arrow function becomes that color…).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Claudio Cicali

Claudio Cicali

My specialties are software engineering, fintech and pointless random rants. I live in Berlin.