A simple script to use your iTerm color profile in vscode's built-in terminal.

iterm-colors-to-vscode.js

// This script takes an iTerm Color Profile as an argument and translates it for use with Visual Studio Code's built-in terminal.
// 
// usage: `node iterm-colors-to-vscode.js [path-to-iterm-profile.json]
// 
// To export an iTerm Color Profile:
//   1) Open iTerm
//   2) Go to Preferences -> Profiles -> Colors
//   3) Other Actions -> Save Profile as JSON
// 
// To generate the applicable color settings and use them in VS Code:
//  1) Run this script from the command line: `node iterm-colors-to-vscode.js [path-to-iterm-profile.json]
//  2) In VS Code, Go to Preferences -> Settings -> Workbench -> Appearance -> Color Customizations -> Edit in settings.json
//  3) Copy and paste the output from the script under `"workbench.colorCustomizations"`
// 
// This script was adapted by Matt Decuir on 2020-04-12.
// Original source: https://gist.github.com/2xAA/bd01638dc9ca46c590fda06c4ef0cc5a
// 

const fs = require('fs');

const mapping = {
  'terminal.background': 'Background Color',
  'terminal.foreground': 'Foreground Color',
  'terminalCursor.background': 'Cursor Text Color',
  'terminalCursor.foreground': 'Cursor Color',
  'terminal.ansiBlack': 'Ansi 0 Color',
  'terminal.ansiBlue': 'Ansi 4 Color',
  'terminal.ansiBrightBlack': 'Ansi 8 Color',
  'terminal.ansiBrightBlue': 'Ansi 12 Color',
  'terminal.ansiBrightCyan': 'Ansi 14 Color',
  'terminal.ansiBrightGreen': 'Ansi 10 Color',
  'terminal.ansiBrightMagenta': 'Ansi 13 Color',
  'terminal.ansiBrightRed': 'Ansi 9 Color',
  'terminal.ansiBrightWhite': 'Ansi 15 Color',
  'terminal.ansiBrightYellow': 'Ansi 11 Color',
  'terminal.ansiCyan': 'Ansi 6 Color',
  'terminal.ansiGreen': 'Ansi 2 Color',
  'terminal.ansiMagenta': 'Ansi 5 Color',
  'terminal.ansiRed': 'Ansi 1 Color',
  'terminal.ansiWhite': 'Ansi 7 Color',
  'terminal.ansiYellow': 'Ansi 3 Color',
  'terminal.selectionBackground':'Selection Color'
}

const componentToHex = c => {
  const hex = c.toString(16)
  return hex.length === 1 ? `0${hex}` : hex
}

if (process.argv.length === 3) {
  try {
    const fileName = process.argv[2]
    const rawData = fs.readFileSync(fileName)
    const jsonData = JSON.parse(rawData)

    const convertedValues = Object.keys(mapping).reduce((results, vsCodeKey) => {
      const itermKey = mapping[vsCodeKey]
      const values = jsonData[itermKey]
      const red = componentToHex(Math.round(values['Red Component'] * 255))
      const green = componentToHex(Math.round(values['Green Component'] * 255))
      const blue = componentToHex(Math.round(values['Blue Component'] * 255))
      const vsCodeValue = `#${red}${green}${blue}`

      results[vsCodeKey] = vsCodeValue
      return results
    }, {})

    console.log(JSON.stringify(convertedValues, null, 2))
  } catch (error) {
    console.log(error)
  }
} else {
  console.log('Please pass a json file as an argument.')
  console.log('usage: `node iterm-colors-to-vscode.js [path-to-iterm-profile.json]`')
}

Thanks heaps for this, @experimatt! This was exactly what I wanted, and the docs at the top made it so easy 🚀

Could you add 'terminal.selectionBackground':'Selection Color' into the mapping? That would fix selection invisible in the vscode light theme. Thank you.

@r888800009 done, good catch!

This is excellent -- thank you so much for putting this together!

One thing I noticed is that the colors are not exactly the same -- the vscode rendering is slightly darker (for my background specifically) and perhaps other colors are more saturated? Im not very well-versed in all the nuances of colorspaces and whatnot, but do you have an idea of what might be going on?

In any case, that is an extremely minor "problem" and thanks so much again for this :)

@mmcguffi no idea

@mmcguffi

One thing I noticed is that the colors are not exactly the same

small color correction

Note

red and green need a bit of a bump +1 to get the hex 'just right'

@r888800009

Could you add 'terminal.selectionBackground':'Selection Color'

Note

Below i also added the workbench.colorCustomizations wrapper

    console.log(`
      "workbench.colorCustomizations": {
        ${Object.keys(convertedValues).map(key => (
          `"${key}": "${convertedValues[key]}"`
        )).join(',\n\t')}
      }
    `);

Example output

      "workbench.colorCustomizations": {
        "terminal.background": "#1d262a",
	"terminal.foreground": "#e8ebed",
	"terminalCursor.background": "#110",
	"terminalCursor.foreground": "#eaeae9",
	"terminal.ansiBlack": "#445b66",
	"terminal.ansiBlue": "#37b7fe",
	"terminal.ansiBrightBlack": "#a1b1b8",
	"terminal.ansiBrightBlue": "#70cffe",
	"terminal.ansiBrightCyan": "#9affe5",
	"terminal.ansiBrightGreen": "#adf7be",
	"terminal.ansiBrightMagenta": "#fd679a",
	"terminal.ansiBrightRed": "#fd746d",
	"terminal.ansiBrightWhite": "#fffffe",
	"terminal.ansiBrightYellow": "#ffe26c",
	"terminal.ansiCyan": "#59ffd1",
	"terminal.ansiGreen": "#5df19e",
	"terminal.ansiMagenta": "#fc226e",
	"terminal.ansiRed": "#fc3941",
	"terminal.ansiWhite": "#fffffe",
	"terminal.ansiYellow": "#ffd132",
	"terminal.selectionBackground": "#4f6a78"
      }

Update

const fs = require('fs');

const mapping = {
  'terminal.background': 'Background Color',
  'terminal.foreground': 'Foreground Color',
  'terminalCursor.background': 'Cursor Text Color',
  'terminalCursor.foreground': 'Cursor Color',
  'terminal.ansiBlack': 'Ansi 0 Color',
  'terminal.ansiBlue': 'Ansi 4 Color',
  'terminal.ansiBrightBlack': 'Ansi 8 Color',
  'terminal.ansiBrightBlue': 'Ansi 12 Color',
  'terminal.ansiBrightCyan': 'Ansi 14 Color',
  'terminal.ansiBrightGreen': 'Ansi 10 Color',
  'terminal.ansiBrightMagenta': 'Ansi 13 Color',
  'terminal.ansiBrightRed': 'Ansi 9 Color',
  'terminal.ansiBrightWhite': 'Ansi 15 Color',
  'terminal.ansiBrightYellow': 'Ansi 11 Color',
  'terminal.ansiCyan': 'Ansi 6 Color',
  'terminal.ansiGreen': 'Ansi 2 Color',
  'terminal.ansiMagenta': 'Ansi 5 Color',
  'terminal.ansiRed': 'Ansi 1 Color',
  'terminal.ansiWhite': 'Ansi 7 Color',
  'terminal.ansiYellow': 'Ansi 3 Color',
  'terminal.selectionBackground': 'Selection Color'
};

const componentToHex = (c, a = 0) => {
  return (Math.floor(c * 255 + (c === 1 ? 0 : a))).toString(16);
};

if (process.argv.length === 3) {
  try {
    const fileName = process.argv[2];
    const rawData = fs.readFileSync(fileName);
    const jsonData = JSON.parse(rawData);

    const convertedValues = Object.keys(mapping).reduce((results, vsCodeKey) => {
      const itermKey = mapping[vsCodeKey];
      const values = jsonData[itermKey];
      if (!values) {
        console.log(`Key ${itermKey} not found in JSON data.`);
        return results;
      }
      const red = componentToHex(values['Red Component'], 1);
      const green = componentToHex(values['Green Component'], 1);
      const blue = componentToHex(values['Blue Component']);
      const vsCodeValue = `#${red}${green}${blue}`;

      results[vsCodeKey] = vsCodeValue;
      return results;
    }, {});

    console.log(`
      "workbench.colorCustomizations": {
        ${Object.keys(convertedValues).map(key => (
          `"${key}": "${convertedValues[key]}"`
        )).join(',\n\t')}
      }
    `);
  } catch (error) {
    console.log(error);
  }
} else {
  console.log('Please pass a json file as an argument.');
  console.log('usage: `node iterm-colors-to-vscode.js [path-to-iterm-profile.json]`');
}