Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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]`')
}
@blakegearin
Copy link

blakegearin commented Nov 10, 2020

+1 worked like a charm. Only thing worth noting is to surround the resulting JSON with "workbench.colorCustomizations": {...} in VS Code

@nikolaikk
Copy link

nikolaikk commented Mar 12, 2021

Great work! Found it useful. Thank you.

@niva83
Copy link

niva83 commented Mar 23, 2021

@experimatt exactly what I was looking for! Thanks a lot!

@lucascosti
Copy link

lucascosti commented Jul 29, 2021

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

@r888800009
Copy link

r888800009 commented Nov 4, 2021

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

@experimatt
Copy link
Author

experimatt commented Nov 6, 2021

@r888800009 done, good catch!

@mmcguffi
Copy link

mmcguffi commented Nov 6, 2021

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 :)

@experimatt
Copy link
Author

experimatt commented Nov 7, 2021

@mmcguffi no idea

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