Skip to content

Instantly share code, notes, and snippets.

@experimatt
Last active July 5, 2024 17:48
Show Gist options
  • Save experimatt/71c8145d72acc034123fcfba0213c317 to your computer and use it in GitHub Desktop.
Save experimatt/71c8145d72acc034123fcfba0213c317 to your computer and use it in GitHub Desktop.
A simple script to use your iTerm color profile in vscode's built-in terminal.
// 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]`')
}
@experimatt
Copy link
Author

@mmcguffi no idea

@32teeth
Copy link

32teeth commented Jul 5, 2024

@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]`');
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment