It’s been a while since I’ve had a chance to get a new blog post up – I’ve been working my way slowly but surely through my list of 27 goals for the year, and I finally got around to one that I’ve been hoping to do for a while – creating my own Visual Studio Code editor theme! I wanted a dark color theme with simple syntax highlighting for writing JavaScript code, and I am thrilled with the results! As I was going through the documentation, I had a hard time finding a good set of instructions outside of the official reference pages, so I decided to write down what my process was and am excited to share that today!

The finished color theme!

Visual Studio Code has a workspace file that you can customize with your own settings for your editor and project preferences, which is the primary mechanic for customizing your own color theme. In the `workbench` settings, you can pick and choose different colors to use for each component of the editor, which I’ll break down further in this post If you look at the Microsoft theme color reference documentation for VS Code, it can be overwhelming (I certainly found it to be!) so I’ve also included a list of what I customized below, which hit the main areas for my desired changes.

The first thing that I did was figure out what kind of color theme I wanted to do – which involved picking out colors! I knew that I wanted to keep my dark color theme as the base, so one of my first decisions involved finding the accent colors that I would use for my editor bars and ultimately, the syntax highlighting.

Whenever I have to choose colors for a project, I turn immediately to Paletton, an online site that provides a really handy UI for picking out complementary color sets. It’s been a huge help for me in terms of choosing themes and various accent shades/highlights, and gives you a variety of different methods for choosing your colors.

The color theme that I landed on.

I chose a central color magenta shade from Paletton as my base, but ended up primarily using the purple shades for my editor window and the magenta/coral shades for syntax highlighting. I chose to use the option to generate adjacent complements, but you can also specify three opposites colors, four, or single colors with shading.

When you click on different colors in the window, you can get more details (including color formats) for each color in your palette:

To start modifying your workbench settings in VS Code, open up Code and click File > Preferences > Settings. You will see your editor open up two windows in a side-by-side split view – the changes that you make will be on the right of these two editors. The left-hand side is a reference to the default workbench settings.

The settings file in VS Code is JSON formatted, so to update your user settings, you add in the new customizations that you want in the `workbench.colorCustomizations` object that you can append to your user settings file. There’s a lot to get through if you’re going directly from the color theme reference, but the good news is that you don’t have to edit all of the defaults to get a theme that you can make your own! I changed the following defaults to create my theme:

Workbench Setting	Description
editor.foreground	The default foreground color in the editor, often used for text
activityBar.background (1)	The background color of the activity bar on the left-hand side of the VS Code editor
activityBar.foreground (2)	The foreground color of the activity bar on the left-hand side of the VS Code editor
sideBarSectionHeader.background (3)	The background color of the headers (usually used for folders) on the sidebar of VS Code. This can be shown or hidden, so you may not immediately see changes after modifying this value.
Button.background (4)	The background color for buttons.
list.activeSelectionBackground (5)	The background of an item in the sidebar list when it is selected and active
list.hoverBackground	The background of an item in the sidebar list when it is hovered over
input.border	The border of input text fields
inputOption.activeBorder	The border of activated items in input fields
focusBorder	The color of the border around any focused item
editor.selectionBackground	The background of selected text in the editor
editor.selectionHighlightBackground	The background of items that match what you have selected in the editor
scrollBarSlider.activeBackground	The color of the scroll bar when being used
scrollBarSlider.hoverBackground	The color of the scroll bar when the mouse is hovered over it

In code:

"workbench.colorCustomizations": {
        "editor.foreground": "#EDE1E8",
        "activityBar.background" : "#452A54",
        "activityBar.foreground": "#FEE5F3",
        "sideBarSectionHeader.background": "#79588B",
        "button.background": "#452A54",
        "list.activeSelectionBackground" : "#642F4D",
        "list.hoverBackground" : "#642F4D33",
        "input.border" : "#452A54",
        "inputOption.activeBorder" : "#79588B",
        "focusBorder": "#79588B",
        "editor.selectionBackground" : "#642F4D",
        "editor.selectionHighlightBackground" : "#642F4D4D",
        "scrollbarSlider.activeBackground" :  "#452A54",
        "scrollbarSlider.hoverBackground": "#452A5499"
 }

If you’re just looking to make changes to the editor windows, then you could choose to stop here and enjoy the new look and feel you have for your workspace! I wanted to make updates to the syntax styles, which involves generating a full .tmTheme file and updating the token settings for my palette. This was a multi-step process, which I’ve outlined below:

1. If you don’t already have it, install NPM and open up the Node.js command prompt after installation completes.
2. In Visual Studio Code, hit View > Command Palette and type in ‘Developer: Generate Color Theme From Current Settings’. You will see a new file open up – save this someplace that you will remember easily.
3. Back in your NPM command prompt, type in `npm install -g yo generator-code`, wait for the installation to complete, then type `yo code` to open up the VS Code extension tool.
4. Select ‘New Color Theme’ then ‘Start Fresh’ from the options presented in the extension tool and follow the prompts. Your publisher ID should be all lower-case. The base theme (dark / light / high contrast) will help categorize your theme and set defaults that you haven’t modified in your custom settings.
5. After you generate your empty theme, open up your folder for your extension by typing `cd <extension identifier>`, hitting enter, and then typing `explorer .`
6. Open up the /themes/ directory and copy the generated file from Visual Studio Code into the directory that was packaged for your extension. Delete the generated JSON.
7. If you have a tmTheme file that you want to use for syntax highlighting, you can set this by opening up your theme file and editing the `tokenColors` variable to point to that file. I saved mine into the same theme directory.

The tokens refer to the types of words that code files contain and can get complex quickly. Microsoft recommends looking at Color Sublime to find some options, but you can definitely define your own right in the theme file if that’s your jam! I picked up Tricolor, since I was looking for something basic, and made edits to the colors in that file rather than trying to sort through the tokens individually. You can edit your .tmTheme tokens in a text editor – including VS Code!

I was originally inspired to create my own color theme by Amy over at BubbleSort. If you’ve made your own, share them here – I would love to see how you’re expressing yourself through your editor of choosing!