Skip to content

Instantly share code, notes, and snippets.

@experimatt
Last active April 9, 2024 17:18
Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • 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]`')
}
@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

Great work! Found it useful. Thank you.

@nikokaoja
Copy link

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

@lucascosti
Copy link

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

@r888800009
Copy link

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

@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

@mmcguffi no idea

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