VS Code Custom Theme

Getting Started

For VS Code it's really rather simple. All you really need is a JSON file. There's a couple of tricks that I've learned the hard way so hopefully you won't have to.

Scopes

Run Cmd+Shift+P and select Developer: Inspect TM Scopes. In this mode you can move through the file with your mouse or keyboard and inspect it while looking for the scopes you want to customize.

Custom Colors

The important parts are the colors and tokenColors sections. Within the colors section, you’ll change the aspect of the UI, while in tokenColors you'll define the syntax you want highlighted.

The colors object contains key value pairs like these:

"colors": {
  "editor.background": "#193549", // This is the main background color
  "editor.foreground": "#fff", // this is the main text colour
  "editor.findMatchBackground": "#ff9900", // Currently found item
}

While tokenColors is an array of objects that look something like this:

"tokenColors": [
    {
      "name": "Comment",
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "fontStyle": "italic",
        "foreground": "#0088ff"
      }
    },
    {
      "name": "Constant",
      "scope": "constant",
      "settings": {
        "foreground": "#D18EC2" // null
      }
    }

pro tip: Once you learn what a color/style actual means in relation to your editor/code, write it inline as a comment. You'll thank yourself later 😉

For the complete list for these values (which I guess is going to change over time), I suggest you to take a look at a specific file (editorColorRegistry.ts) in the VS Code repository which contains all the definitions instead of relying on a more-or-less up-to-date official documentation.

Please note that you can also change these colors without having to write a whole theme! Colors can also be set via the workbench.colorCustomizations object, as explained in the official docs. These settings will always override the theme customizations.

See Changes

There's two ways to view your theme in your editor.

One is to publish to the VS Code Marketplace (which you'll have to do eventually).

The second is load it locally via .vscode/extensions. To do this you'll just need to move/make a folder which contains your theme & structured something like this my-custom-theme/theme/whatever.json. It's worth noting that you also need a package.json at the root of this folder.

Run Cmd+Shift+P and then choose Preferences: Color Theme. If your theme and package.json files are setup right, you should be able to see (and select) your new theme from the list.

If you need a reference then check out my theme. Once you've got all that in place you just need to refresh your editor via Cmd+Shift+P and then run Reload Window.

Conclusion

This is basically it. You can now — with a lot of patience, start writing your own theme. When I was making mine I found it both very satisfying and also a bit tricky at times. Hopefully these tips can help you avoid any tricky moments that I encountered.

If you need a reference point feel free to check out, or use, my theme Caddy.

Tags

• vscode
• theme