Last active
July 5, 2024 17:48
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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]`') | |
} |
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'
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
@mmcguffi no idea