Using VS Code themes in Windows Terminal

While setting up a new PC and trying to configure Windows Terminal to look nice, I realized that there was a great source of terminal themes that are overlooked - themes for VS Code! Every VS Code theme has a color scheme for the terminal, and I really enjoy my current theme. So, let's get it into Windows Terminal!

Let's make an App For That...except we can't

My first idea was to make a VS Code Extension to automatically sync your current VS Code theme to Windows Terminal, but unfortunately, this isn't possible at the moment - there is no API to get colors from an extension. So instead, I'll teach you how to do what a computer should be doing but isn't!

First, snag out the colors

Hit Ctrl-Shift-P and type "Generate", then find "Generate Color Theme From Current Settings" - this will dump your color theme to a JSON blob. Good! But we need to do a bit of munging to make it work.

Converting VS Code's colors to Terminal's colors

Scroll down to the schemes section of Windows Terminal's profiles.json and create a new one, start off with the basics:

{
  "name": "VS Code"
}

Now, in the untitled window that Generate Theme made, find editor.background and editor.foreground, then move them to your JSON block. Remove the editor. bit, so:

{
  "name": "VS Code",
  "background": "#21252b", // was editor.background!
  "foreground": "#a9b2c3"
}

Now, we'll grab out the terminal theme colors. Scroll down in the VS Code colors until you get to a section with terminal.ansi... (i.e. terminal.ansiBlue). Copy all of the named colors (ignore other terminal. settings like terminal.border) into the JSON section, remove the terminal.ansi bit, and recase it, so:

{
  "name": "VS Code",
  "background": "#21252b",
  "foreground": "#a9b2c3",
  "black": "#21252b",
  "blue": "#61afef",
  "brightBlack": "#5f6672",
  "brightBlue": "#007fff",
  "brightCyan": "#08e8de",
  "brightGreen": "#66ff00",
  "brightMagenta": "#8b00ff",
  "brightRed": "#d74e42",
  "brightWhite": "#d4d7d9",
  "brightYellow": "#e5c07b",
  "cyan": "#56b6c2",
  "green": "#98c379",
  "magenta": "#b57edc",
  "red": "#e06c75",
  "white": "#a9b2c3",
  "yellow": "#d19a66"
}

The last thing you need to do? Rename magenta to purple. What a world.

Let's wire it up!

Now, go to your profiles section and change colorScheme to VS Code, but there's one last gotcha! Bizarrely, a Profile also has a background key, which seems to override the one set in schemes - just remove this key.