The pains of creating a color theme for Visual Studio Code.

First off, if you think creating and maintaining a VS Code color theme is a good idea, I am so sorry.

You should use Yeoman to initialize the extension. Run yo code, pick "New Color Theme", "No, Start fresh", name your theme, and open it in VS Code once it's created. In the themes directory you should see a single .json file. That's your theme that you're going to be editing.

The theme file has a colors section and a tokenColors section. Don't worry about tokenColors for now and delete its contents if there are any. Right now we're going to focus on colors which defines colors for the entire editor.

The entire color list is huge, and also nowhere to be found in its full version. There's no color list, and no JSON schema to parse. The only thing that is semi-reliable is Microsoft's color reference, but it's not 100% correct — there are some color definitions in VS Code that are not present on that list, and some colors from that list are not valid color definitions in VS Code. It's a mess.

The only way to get a list of up-tp-date colors that I know of is via VS Code itself. See, when you edit your settings.json file, there's this autocomplete that shows you all available definitions. Placing a cursor in a workbench.colorCustomizations section and typing a quotation mark will show you the list of available colors. I tried to extract this list from the DOM via Developer Tools but to no avail — the autocomplete list disappears when I click anything in the DevTools window. It's time to make a small one-time extension and use the VS Code API to extract this list.

I made a default extension via Yeoman. This created a sort of “Hello, World” extension, which I edited a bit. Specifically, I modified the extension.ts file, like so:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	let disposable = vscode.commands.registerCommand('colors.helloWorld', () => {
		const editor = vscode.window.activeTextEditor;

		if (editor != undefined) {
			const completionList = vscode.commands.executeCommand(
				'vscode.executeCompletionItemProvider',
				editor.document.uri,
				editor.selection.active,
			);

			completionList.then(completionList => {
				const completions = completionList as vscode.CompletionList;
				// Outputting items one by one because VS Code has a size limit on a single log.
				for(var item of completions.items) {
					console.log(`${JSON.stringify(item)}`);
				}
			})
		}
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}

I ran the extension which opened a new VS Code window. I navigated to any settings.json and typed

"workbench.colorCustomizations": {
	"[Default Dark+]": {
		""
	}
}

putting my cursor inside of the "". Then I ran the "Hello world" command provided by our extension. This outputted stuff to the DevTools console which I manually copied to a file and modified a bit. Once it was a proper JSON, I transformed it with jq and got back something like this:

{
	"colors": {
		"activityBar.activeBackground": "#ffffff",
		"activityBar.activeBorder": "#000000",
		// ...
	}
}

Some elements are pretty well-hidden and sometimes very obscure. I've found an online VS Code theme creator that can help us find roughly where the colors can be located. The opposite problem — finding out what color is that specific element in VS Code — can be solved with selecting it with your cursor in DevTools.